从javascript编辑SVG样式

我有一张SVG世界地图，我想通过改变SVG中每个区域的样式属性，实时地用各种度量为每个区域着色。我想把英国染成蓝色，以反映即将到来的保守党胜利（啊哼）

---

这需要是动态的，因为数据经常更改，并被推送到浏览器。

您可以将CSS样式应用于SVG元素。不用说，这需要一个合适的标记。例如，如果你的地图看起来像（非常简单：-）

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

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

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

最后，还可以将外部样式表包含到SVG文档中：

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

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

...

如果您不想更改整个样式，可以执行以下操作：

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

---

是否有任何方法可以使用此答案中提供的jsInfo更改defs下的样式与上述答案相同。只是重复并写下答案below@SandeepChikhale不，这是与另一个答案的有用区别。有时，您不想更新整个样式，只想更新一个属性。