在 HTML 中嵌入外部 SVG 以进行 JavaScript 操作 [英] Embedding external SVG in HTML for JavaScript manipulation

问题描述

我有一个 SVG 图像，显示了地理区域.http://upload.wikimedia.org/wikipedia/commons/7/71/Nederland_gemeenten_2009.svg

我想在网页上显示 SVG 图像，并使用 JavaScript 和 CSS 的组合与图像进行交互.(即，检测区域上的点击，为区域设置不同的背景颜色).

我知道在 StackOverflow 上多次问过这个问题，但我找不到完整的代码示例来进一步研究.欢迎任何关于 JavaScript 包(如 jQuery)或插件的建议.

解决方案

我对问题的理解是有不同的方面需要解决:

1. 如何准备用于交互的图像
2. 如何在页面中嵌入图片
3. 如何在 SVG 中使用 CSS
4. 如何使用 JavaScript 进行交互

准备图像

首先，我建议清理图像.Inkscape 会留下您不需要的所有类型的东西，其中包括 sodipodi: 和 inkscape: 命名空间中的元素和属性以及重复和/或冗余样式属性.您不必删除它，但它可以为您节省一些带宽/加载时间，而且如果您想使用 CSS 样式表，那么样式属性会阻碍您的工作.

在您的示例文件中，您有 472 次相同的样式属性.删除所有这些并创建一个等效的 CSS 规则.

您还可以在标记中添加一些有关市政当局的信息.你可以例如根据名称更改代表自治市的每条路径的 ID.为此，您还可以使用 data-* 属性.后者的优点是可以使用空格.请参阅下文，了解这对交互有何用处，尤其是与 CSS 交互时.

嵌入图片

我建议使用内联 SVG，尤其是当您想与 CSS/JavaScript 交互时.这意味着，您只需将 SVG 标记添加到您的 HTML，或者您使用 Ajax 加载和插入它.后者的好处是周围页面加载速度更快，响应速度更快.

内联 SVG 元素的示例:

<!-- 这是一个 HTML div，里面是 SVG --><svg xmlns="http://www.w3.org/2000/svg";宽度=100像素"高度=100像素"><圆r=50"cx=50"cy=50"填充=绿色"/></svg>

如何使用 Ajax 加载 SVG 的简化示例:

xhr = new XMLHttpRequest();xhr.open(GET",my.svg",false);//以下行只是为了安全起见；//如果您的服务器提供具有正确 MIME 类型的 SVG，则不需要xhr.overrideMimeType("image/svg+xml");xhr.onload = 函数(e){//您可能还想在此处检查 xhr.readyState/xhr.statusdocument.getElementById(svgContainer").appendChild(xhr.responseXML.documentElement);};xhr.send("");

如何使用 CSS

SVG 可以像 HTML 一样设置样式.当然，SVG 有它自己的一组属性，比如 fill-opacity 或 stroke-dasharray 并且不支持很多 HTML 的属性，比如 margin、position 等.但是选择器机制是 100% 相同的.

您可以在 <style> 元素或外部 CSS 文件中混合使用内联 SVG 的 CSS 和 HTML 的 CSS.您还可以在 SVG 代码和 style 属性中使用