在SVG中访问图像元素URL

Question

我的SVG中有许多<image>元素。 我想向他们添加一个onclick处理程序，以访问与特定节点关联的图像URL，但是在DOM文档中找不到字段名称。 如果是HTML，那么我将访问this.src，但是SVG DOM显然有所不同-我找不到与此相关的任何文档。

进一步说明：如果我有类似<image xlink:href="http://example.jpg" onclick="code">那么我需要使用“代码”来访问当前节点的图像URL。

Answer 1

好的，尽管我不确定建议使用哪种方法，但以下两种方法似乎都可以使用：

onclick="window.open(this.getAttribute('xlink:href'),'_blank');"

onclick="window.open(this.getAttributeNS('http://www.w3.org/1999/xlink', 'href'), '_blank');"

Answer 2

您可以在<object>标签中为SVG使用处理程序：

<object type="image/svg+xml" data="picture.svg">
  <img src="picture.png" alt="">
</object>

Answer 3

SVG DOM属性有一个额外的技巧，因为许多属性可以动画化：在属性名称中添加一个额外的.baseVal （用于非动画值）。 对于href ，可以xlink:部分。

onclick="window.open(this.href.baseVal, '_blank');"