Javascript 截获SVG上的锚href

在中，我有一个react应用程序示例，其中包含一个iFrame，它加载一个HTML文件并向其中添加一个单击事件侦听器

原因是在单击时检测

href

s并相应地采取行动。HTML还包括一个SVG部分，我在获取带有主机名的

href

时遇到问题

    <div>
      <a href="/items/1234"> Link outside of SVG</a>
    </div>
    <div>
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 756 1315">
        <a href="/items/1234" id="huvud">
          <path
            d="M342...14.07Z"
            id="myID"
            fill="#5fe4"
            opacity="50"
          ></path>
        </a>
      </svg>
    </div>

对于第一个

标记，

href

带有正确的主机名（例如http://localhost:3000/items/1234)

---

对于SVG中的

标记，link.href返回

svganizatedString:{baseVal:string，animVal:string}

并使用

link.getAttributeNS（'http://www.w3.org/1999/xlink“，”href'）

不包含主机名。

在锚定标记中的href属性之前添加xlink:，可以获得uri。然后可能会像这样添加当前位置：

    <div>
      <a href="/items/1234"> Link outside of SVG</a>
    </div>
    <div>
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 756 1315">
        <a href="/items/1234" id="huvud">
          <path
            d="M342...14.07Z"
            id="myID"
            fill="#5fe4"
            opacity="50"
          ></path>
        </a>
      </svg>
    </div>

window.location.hostname + link.getAttributeNS("http://www.w3.org/1999/xlink", "href");


<a xlink:href="/items/1234" id="huvud">
      <path
        d="M342...14.07Z"
        id="myID"
        fill="#5fe4"
        opacity="50"
      ></path>
</a>

---

多亏了@Frederic Brüning，我的场景专门处理所有锚链接

因此SVG中的a标记不需要

xlink:href=“xxx”

，只需要

href=“xxx”

然后，

getAttributeNS

不需要名称空间

getAttributeNS（“”，'href'）

返回任何

标记的

href

（精确字符串值）

然后附加origin将解决我的问题

theUrl=`${window.location.origin}${link.getAttributeNS（''，'href'）}`

谢谢你的提示。仅供参考

getAttributeNodeNS

在Safari上不起作用

let node = link.getAttributeNodeNS("http://www.w3.org/1999/xlink", "href")

node.baseURI + node.value