使用 JavaScript 为 SVG 多边形动态着色

Question

我正在解析一些数据，其中包含定义多边形的点列表和指示多边形所属类的整数。我想让每个类都有不同的颜色，但我不知道提前会有多少个，所以我想在 JavaScript 中动态地执行此操作。

这里是一些创建其中一些多边形的代码。在 JavaScript 中，我将第二个类应用于锚点并得到我想要的结果。但是，由于我想动态地执行此操作，因此我希望在 CSS 中除了基本样式之外没有预定义样式。还有一行被注释掉，我认为可以实现此目的，但行为不正确。我尝试过许多其他变得越来越复杂的事情，但看起来这应该是直接做的。我基本上想继承基类行为并修改单个属性（填写我的情况）。在 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>

Answer 1

您可以为此使用 CSS 变量。

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>