从 javascript 编辑 SVG 样式答案

【问题标题】：Editing SVG styles from javascript从 javascript 编辑 SVG 样式
【发布时间】：2010-03-17 14:57:20
【问题描述】：

我有一张世界的 SVG 地图，我想通过更改 svg 中每个区域的样式属性来实时按各种指标为每个区域着色。例如，我想将英国染成蓝色。

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：