Question

我正在使用svg绘制图片，然后使用锚标记创建一个超链接，点击后会跳转到新的网址。当我将svg路径内联时，这适用于IE，但当我用“use”标签替换它时，目标超链接不再起作用。当鼠标悬停在svg绘制的图片上时，在两种情况下，目标超链接都显示在浏览器的底部，但是单击“使用”则不起作用。我尝试过用锚标签包裹的g标签，但这没有帮助。

感谢任何反馈，谢谢。注意：我的实际要求并非如此微不足道，但我已将问题减少到此以帮助查明问题。我真的想把svg带到一个.svg文件中，这样我就可以重复使用它而不需要在多个.html文件中复制它。

所以这在.html

中很好

<!doctype html>
<html lang="en-GB">
<head>
</head>
<body>
<svg  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  id="svgMap">
<a id="region1" xlink:href="target2.html">
<path d="
  M 0,0 L 0,100 L 100,100 Z"/>
</a>
</svg>
</body>
</html>

但是当我将路径取出到.svg文件中然后在其中链接时，会阻止超链接被跟踪。在这两种情况下，svg都被正确绘制。

这不起作用： - .html

<!doctype html>
<html lang="en-GB">
<head>
</head>
<body>
<svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      id="svgMap">
    <a id="region1" xlink:href="target2.html">
    <use xlink:href="example1.svg#target"></use>
</a>
</svg>
</body>
</html>

example1.svg

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
   id="target"
   >
       <path d="
  M 0,0 L 0,100 L 100,100 Z"/>

</svg>

我也试过替换

<a id="region1" xlink:href="target2.html">

带

<a id="region1" href="target2.html">

但这也不起作用。

Answer 1

在svg周围包装锚标签并使用标签解决了问题，如下所示： -

<!doctype html>
<html lang="en-GB">
<head>
</head>
<body>
<a href="target2.html">
  <svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      id="svgMap">
  <use xlink:href="example1.svg#target"></use>
  </svg>
</a>
</body>
</html>

使用USE /外部svg文件标记替换内联SVG可防止超链接执行操作

1 个答案: