从javascript编辑SVG样式

Question

我有一个世界的SVG地图,我想通过改变svg中每个区域的样式属性,通过各种指标实时为每个区域着色.EG我想用英国蓝色来反映即将到来的保守党胜利(咳咳).

这需要是动态的,因为数据经常变化并被推送到浏览器.

Answer 1

您可以将CSS样式应用于SVG Elements.不用说,这需要合适的标记.例如,如果您的地图看起来像(非常简化:-)

<svg>
    <g id="USA">...</g>
    <g id="UK">...</g>
</svg>

您可以简单地执行以下操作:

var country = document.getElementById("UK");
country.setAttribute("style", "fill: blue; stroke: black");

当然,也可以将样式表嵌入到SVG文档中:

<svg>
  <defs>
    <style type="text/css">
      <![CDATA[
      // insert CSS rules here
      ]]>
    </style>
  </defs>
</svg>

最后,还可以在SVG文档中包含外部样式表:

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<svg>
    ...

Answer 2

如果你不想改变整个风格，你可以这样做：

var country = document.getElementById("UK");
country.style.fill = "blue";
country.style.stroke = "black";