Question

我有一个封装的svg，里面有一个href属性链接。不幸的是，该链接无法在我在iPhone，iPad，LG手机，三星Galaxy Tablet上测试过的大多数移动浏览器（Safari，Firefox等）上工作。

这是我在HTML内部和外部SVG内部的代码：

<svg width="400px" height="400px" font-size="55px" font-family="Open Sans" font-weight="bold">
<!--LINK EMBEDDED IN SVG-->
  <a href="https://www.nzz.ch" target="_blank" class="svg-link">
    <text x="50%" y="50%" text-anchor="middle" fill="white">CLICKME</text>
  </a>
</svg>

完整代码是：

<html>
<body>
  <div style="font-family:Open Sans;font-size:15px;padding:30px;position:absolute;">
    Test for text clickable on mobile
  </div>
  <svg width="600px" height="600px" fill-opacity="0.8">
    <circle r="200" cx="300" cy="300" style="fill:#11db4d;">
    </circle>
    <g transform="translate(100,100)">
    <svg width="400px" height="400px" font-size="55px" font-family="Open Sans" font-weight="bold">
      <!--LINK EMBEDDED IN SVG-->
      <a href="https://www.nzz.ch" target="_blank">
        <text x="50%" y="50%" text-anchor="middle" fill="white">CLICKME</text>
      </a>
    </svg>
  </g>
  </svg>
</body>
</html>

或者在jsfiddle上：https://jsfiddle.net/sqhy8p15/2/，我也尝试按照此处make an html svg object also a clickable link (on iphone)的答案中的建议更改z-index和padding，但是它不起作用（https://jsfiddle.net/yau5wzrf/2/）。

感谢您的帮助！

Answer 1

使用href代替属性xlink:href 另外，请确保xlink命名空间已在SVG元素上删除。

请参阅：https://alligator.io/svg/hyperlinks-svg/

SVG中的Anchor href属性在移动浏览器上不起作用

1 个答案: