将链接添加到单个SVG路径

3

我正在尝试将外部网页链接添加到SVG的单个路径上。但是,当我尝试像普通链接一样使用<a href=""></a>时,它不起作用。

有什么想法可以实现这一点吗?

需要在id为"needLink"的第一个路径上添加链接的HTML标记。

<div><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="-119 -263.1 471.1 666.8" style="enable-background:new -119 -263.1 471.1 666.8;" xml:space="preserve">
      <style type="text/css">
        .ukGreen1{fill:green;}
      </style>
        <path id="needLink" class="ukGreen1" d="M6.2,312.4c0,0,3.6-0.3,5.6-0.8c2-0.5,13-4.5,13-4.5l6.3-1.4l17.8-4.2c0,0,4-1.1,7.4-0.3
          c3.4,0.8,9.4,1.7,12.6-0.2c3.2-1.9,3.9-3.4,6.9-4c0,0,2.5-0.4,3.9-0.9c1.3-0.5,3.7-1,6.3-1.3c1.1-0.1,1.7-0.3,2-0.5l0.3,0.7
          c0,0.4,0.1,0.9,0.3,1.4c0.3,1.3-2.3,5.2-4.1,6.5c-1.8,1.3-3.6,6-4.1,7.2c-0.5,1.2-1.7,5.3-1.5,6.1c0.2,0.8-2.9,9.1-2.9,9.1l-4.8,8
          l-11.2-2.7l-4.2,1.3l-1.5,0.6L42,336.7l-13.4,7.8l-3,5.4l-0.9-0.5c0,0-0.9-0.2-1.4-2s-2.8-5.8-2.8-5.8c-0.5-2.8-4.2-8-5.5-12.5
          s-7.8-10-7.8-10.8s-1.2-5.5-1.2-5.5L6.2,312.4z"/>
        <path class="ukGreen1" d="M22.8,354.7l-1.6,14.2l-8,11.6l-10.1-2L-15.3,368l-2.2-3.8l-3.2,3.1l-12-2.2l-22.2,3.7l-12.9,11.7l-9.2,6
          l0.3,9.7l-9.4,5.8l-7.4-10.7l-10.3-3.4l-5.1,4.9l-7.5,0.7l0.9-8.8l6.5-5.9l7.3,0.5l8.3-3.5l15.5-16.5l13.5-16.2l21.8-18.3
          l2.7-19.6l16.8-5.3l10-17.4l1.3,1.8c0,0,5.5,11.6,6.1,12.8c0.6,1.1,3.9,5,5.6,6c1.6,0.9,3.2,7.4,5.5,9.1l0.7,0.7
          c0,0,1.2,4.8,1.2,5.5s6.5,6.2,7.8,10.8s5,9.8,5.5,12.5c0,0,2.2,4,2.8,5.8s1.4,2,1.4,2l0.9,0.5L22.8,354.7z"/>
      </svg>
</div>
1个回答

4
<svg (...) xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:title="title (tooltip) text" xlink:href="http://google.com/">
<whatever drawing markups you want to be linked/>
</a>

换句话说:您缺少命名空间。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接