37: SVG 和 JavaScript/DOM 事件

当您使用内联 <svg> 时，所有元素都位于 DOM 中，就像 <div>、<span> 和任何其他 HTML 元素一样。

如果您有类似以下的 SVG

<svg>
  <rect id="foo" x="10" y="10" width="100" height="100" />
</svg>

并且您执行以下操作

var rect = document.getElementById("foo");

您将获得对该 <rect> 的引用。

不仅如此，您还可以附加事件侦听器，这些侦听器的工作方式与您预期的一样。您还可以调整属性以及您期望能够使用 JavaScript 执行的任何其他操作。

不过，至少有一个问题让我困扰。我们经常将事件侦听器附加到链接，采用渐进增强的方式。在非平凡的 JavaScript 架构中，这些事件侦听器很可能将事件传递给处理功能的其他函数。在这种情况下，依赖于 this 关键字会变得棘手，并且通常不建议使用。相反，由于您拥有 event，因此可以使用 event.target。但这可能同样棘手，因为对于内联 SVG，目标可能是链接、SVG 元素本身或任何 SVG 形状。

解决方案是向上遍历 DOM 到预期位置。或者尝试完全避免这种情况，使用

svg {
  pointer-events: none;
}

如果您不打算在 SVG 本身使用任何交互性，我建议您使用这种方法。