Html Question posted in
Some basic documentation can be found here.

Html – Dynamically Color SVG Polygons with JavaScript

I’m parsing some data that contains a list of points that define a polygon and an integer indicating what class the polygon belongs to. I would like to make each class a different color but I don’t know how many there will be ahead of time so I’d like to do this dynamically in JavaScript.

Here is some code that creates some of these polygons. In the JavaScript I apply a second class to the anchors and get the result that I want. However, since I want to do this dynamically, I would like to do this without having a predefined style in the CSS other than the base style. There is also a line that’s commented out that I thought would achieve this but the behavior is incorrect. I’ve tried many other things getting more and more complex but it seems like this should be straight forward to do. I basically want to inherit the base class behaviors and modify a single property (fill in my case). What’s a clean way to do this in JavaScript?

function init() {
  var anchors = document.getElementById("mySvg").querySelectorAll("a");

  for (var i = 0; i < anchors.length; i++) {
    anchors[i].classList.add('test') // This works
    //anchors[i].style.fill = "#00ff0077"         // This does not
  }
}

init()
svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

a {
  stroke: #070000;
  stroke-width: 1.0;
  fill: #77777777;
  transition: fill .15s;
}


/* Clear mask on mouseover to make the segment more visible */
.segment:hover {
  fill: #00000000;
  stroke-width: 0.0;
}

/* Use bright color to show focus */
.segment:focus {
  fill: orange;
}

/* New color for testing */
.test {
  fill: #00007777;
}
<div class="img-overlay-wrap" width="200" height="200">
  <img id="background_img" src="http://placehold.it/200x200">
  <svg id="mySvg" viewbox="0 0 200 200">
            <a class=segment href="#"> <polygon points="0 0 100 0 100 100 0 100"         /> </a>
            <a class=segment href="#"> <polygon points="100 0 200 0 200 100 100 100"     /> </a>
            <a class=segment href="#"> <polygon points="0 100 100 100 100 200 0 200"     /> </a>
            <a class=segment href="#"> <polygon points="100 100 200 100 200 200 100 200" /> </a>
        </svg>
</div>
Tags:

2

Answers


  1. 0

    You can use CSS variables for this.

    const anchors = document.querySelectorAll('#mySvg a')
  ;
anchors.forEach( anchor =>
  {
  anchor.style.setProperty('--fillColor', '#00ff0077');
  });
    svg {
  display     : block;
  width       : 300px;
  height      : auto;
  margin      : 0 auto;
  --fillColor :  #77777777;
  }
a {
  stroke       : #070000;
  stroke-width : 1.0;
  fill         : var(--fillColor);
  transition   : fill .15s;
  }


/* Clear mask on mouseover to make the segment more visible */
.segment:hover {
  fill         : #00000000;
  stroke-width : 0.0;
}

.segment:focus { fill: orange;    }
.test          { fill: #00007777; }
    <div class="img-overlay-wrap" width="200" height="200">
  <img id="background_img" src="http://placehold.it/100x100">
  <svg id="mySvg" viewbox="0 0 200 200">
    <a class="segment" href="#">
      <polygon points="0 0 100 0 100 100 0 100" /> 
    </a>
    <a class="segment" href="#">
      <polygon points="100 0 200 0 200 100 100 100" />
    </a>
    <a class="segment" href="#"> 
      <polygon points="0 100 100 100 100 200 0 200" /> 
    </a>
    <a class="segment" href="#">
      <polygon points="100 100 200 100 200 200 100 200" /> 
    </a>
  </svg>
</div>
    Login or Signup to reply.
  2. 0

    The line anchors[i].style.fill = "#00ff0077" does not work because you cannot set the opacity of fill like this. You have to use the fill-opacity property.
    (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity)

    The following lines work:

          anchors[i].style.fill = '#00FF00'
      anchors[i].style['fill-opacity'] = 119/255
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search