我有一个SVG图像,显示地理区域. http://upload.wikimedia.org/wikipedia/commons/7/71/Nederland_gemeenten_2009.svg
我想在网页上显示SVG图像,并使用JavaScript和CSS的组合来与图像进行交互.(即,检测区域上的点击,为区域设置不同的背景颜色).
我知道在StackOverflow上多次询问这个问题,但我找不到完整的代码示例.欢迎任何有关JavaScript包的建议,如jQuery或插件.
我有一个页面,其中包括几个SVG文件.为了同步这些SVG文件的样式,我想创建一个样式表来保存所有样式信息.
但是,当包含如下所示的SVG时,CSS将不会被应用.有人解决这个问题,或者只是无法链接到引用的SVG中的其他(CSS)文件<img src="..." />？
请参阅下面的示例代码.pic.svg直接在浏览器中加载时,将应用所有样式,并且可以看到绿色矩形.但是当打开page.htm所有时,就会看到一个黑色矩形.显然,没有应用任何已定义的样式.
page.htm
<!DOCTYPE html>
<html>
<body>
<img src="pic.svg" style="width: 100px; height: 100px;" />
</body>
</html>
pic.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<?xml-stylesheet type="text/css" href="styles.css" ?>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
>
<rect x="10" y="10" width="80" height="80" />
</svg>
styles.css的
rect {
stroke: black;
fill: green;
}
编辑
从答案来看,这里出现了很短的时间,我得到了这个链接到规范和以下引文.在我看来,这说明上述代码应该有效!
使用"img","object"(HTML)或"image"(SVG)元素嵌入HTML或XML文档中的独立SVG文档
[...]
引用链接"在引用的SVG文档中的任何位置定义的样式表(在样式元素或样式属性中,或在与样式表处理指令链接的外部样式表中)适用于整个SVG文档,但不影响引用文档(也许HTML或XHTML)."