从JavaScript编辑SVG样式

Question

我有一张SVG世界地图，希望通过更改每个区域的样式属性来实时按照不同度量标准对每个区域进行着色。例如，我想将英国染成蓝色。

由于数据经常变化并且被推送到浏览器中，因此这需要是动态的。

- Chilly

Answer 1

您可以对SVG元素应用CSS样式。毋庸置疑，这需要合适的标记。所以例如，如果您的地图看起来像这样（非常简化 :-）

<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>
    ...

- Leo

---

有没有办法使用JS更改defs下的样式？ - Sandeep Chikhale

Answer 2

如果您不想改变整个样式，可以这样做：

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

- mjaque

---

此答案提供的信息与上面的答案相同，只是重复并在下面写出了答案。 - Sandeep Chikhale

不，这是与其他答案的有用区别。有时您不想更新整个样式，只需更改一个属性。 - nickgeorgiou