我有一张SVG世界地图,希望通过更改每个区域的样式属性来实时按照不同度量标准对每个区域进行着色。例如,我想将英国染成蓝色。
由于数据经常变化并且被推送到浏览器中,因此这需要是动态的。
我有一张SVG世界地图,希望通过更改每个区域的样式属性来实时按照不同度量标准对每个区域进行着色。例如,我想将英国染成蓝色。
由于数据经常变化并且被推送到浏览器中,因此这需要是动态的。
您可以对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>
...
var country = document.getElementById("UK");
country.style.fill = "blue";
country.style.stroke = "black";