访问SVG中的图像元素URL

Question

我有一些＆lt; image＆gt;我的SVG中的元素。我想为他们添加一个onclick处理程序来访问与特定节点关联的图像URL，但是我无法在DOM文档中找到字段名称。如果它是HTML，那么我将访问this.src，但SVG DOM明显不同 - 我无法找到相关文档。

补充说明：如果我有类似的话 <image xlink:href="http://example.jpg" onclick="code">然后我需要＆＃39;代码＆＃39;访问当前节点的图像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');"