javascript - 在 HTML 中嵌入外部 SVG 以进行 JavaScript 操作

Question

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

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

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

Answer 1

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

如何为交互准备图像

如何在页面中嵌入图片

如何在 SVG 中使用 CSS

如何使用 JavaScript 进行交互

准备图像
首先，我建议清理图像。 Inkscape 会留下所有您不需要的东西，其中包括 sodipodi: 中的元素和属性。和 inkscape:命名空间以及重复和/或冗余的样式属性。您不必删除它，但它可以为您节省一些带宽/加载时间，如果您想使用 CSS 样式表，那么样式属性会妨碍您。
在您的示例文件中，您有 472 次相同的样式属性。删除所有这些并创建一个等效的 CSS 规则一次。
您还可以在标记中添加一些有关市政当局的信息。你可以例如根据名称更改代表自治市的每条路径的 ID。您也可以使用 data-*属性用于此目的。后者的优点是可以使用空格。请参阅下文，了解这对交互有何用处，尤其是与 CSS 交互时。
嵌入图像
我建议使用 SVG inline，特别是如果你想与 CSS/JavaScript 交互。这意味着，您只需将 SVG 标记添加到您的 HTML，或者您使用 Ajax 加载和插入它。后者的好处是周围页面加载速度更快，响应速度更快。
内联 SVG 元素的示例:

<div id="svgContainer">
  <!-- This is an HTML div, and inside goes the SVG -->
  <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
    <circle r="50" cx="50" cy="50" fill="green"/>
  </svg>
</div>

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

xhr = new XMLHttpRequest();
xhr.open("GET","my.svg",false);
// Following line is just to be on the safe side;
// not needed if your server delivers SVG with correct MIME type
xhr.overrideMimeType("image/svg+xml");
xhr.onload = function(e) {
  // You might also want to check for xhr.readyState/xhr.status here
  document.getElementById("svgContainer")
    .appendChild(xhr.responseXML.documentElement);
};
xhr.send("");

如何使用 CSS
SVG 可以像 HTML 一样设置样式。当然，SVG 有它自己的一组属性，比如 fill-opacity或 stroke-dasharray并且不支持很多 HTML 的属性，比如 margin , position或类似。但是选择器机制是 100% 相同的。
您可以在 <style> 中将内联 SVG 的 CSS 与 HTML 的 CSS 混合在一起。元素或外部 CSS 文件。您也可以使用 <style> SVG 代码中的元素和 style属性。
假设您为 SVG 元素提供了有意义的 ID 或 data-*属性，使用 CSS 突出显示自治市的两种方法是:

#Bronckhorst, #Laarbeek {fill:red}

或者

*[data-gemeente=Bronckhorst], *[data-gemeente=Laarbeek] {fill:red}

或者，当然，您可以更改各个元素的样式属性。属性也支持作为属性，即 style="stroke-width:2"也可以指定为 stroke-width="2" .如果使用属性和 CSS(使用样式属性、样式元素或外部样式表)设置相同的属性，则 CSS 会覆盖该属性。
JavaScript 交互
HTML 和 SVG 在 JavaScript 交互方面基本上没有区别，至少只要您使用普通的 DOM。这意味着，HTML 特定功能，如 innerHTML SVG 不支持(即没有 innerSVG )。但是 SVG 有它自己的图形特定的 DOM 方法集( see the W3C specs )。
需要注意的一件事是使用命名空间。所有 SVG 元素都应该在 SVG 命名空间中，并且在使用 JavaScript 创建它们时， createElementNS()必须使用，而不是 createElement() :

var use = document.createElementNS("http://www.w3.org/2000/svg","use")

同样，XLink 命名空间中的属性(即 xlink:href )必须使用 setAttributeNS() 进行操作。而不是 setAttribute() :

use.setAttributeNS("http://www.w3.org/1999/xlink","href","#foo")

由于像 jQuery 这样的库部分依赖于 HTML 特定功能，因此在操作 SVG 时避免它们更安全。 [ 编辑 :自从我写了这个答案后，情况可能有所改善。不是 jQuery 用户，我不知道现在它的工作情况如何。] 还有 SVG 特定库，如 D3.js这对于特定目的很有用，值得一看。 (当我简单地将它称为 SVG 特定库时，我正在做 D3.js 不公正，因为它更多)。
您可以使用 onclick和类似的属性和标准 DOM addEventListener() .使用 JavaScript 事件的一个非常简单的例子是向 <svg> 添加一个事件监听器。报告用户点击的城市名称的元素:

document.getElementsByTagName("svg")[0]
  .addEventListener("click",function(evt){
    alert(evt.target.getAttribute("data-gemeente"))
  },
  false)

旁注:工具提示
与使用 title 获得的效果相同HTML 中的属性可以使用 <title> 来实现SVG 中的元素。只需放一个 <title>元素内的 SVG 元素并在悬停时，您会看到带有 <title> 内容的工具提示元素。

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
  <rect width="100" height="100">
    <title>test</title>
  </rect>
</svg>