添加单个 svg 路径的链接

Question

我正在尝试将外部网页的链接添加到 svg 的单个路径上。然而，当我尝试像普通链接一样使用

<a href=""></a>

时，它不起作用。

我对如何实现这一目标有什么想法吗？

HTML 标记 - 第一个路径上需要 id="needLink" 的链接

<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>

Answer 1

<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>

换句话说：你错过了命名空间。

Answer 2

您可以尝试像下面这样封装您的路径元素：

<a xlink:href="http://url-to-whatever">
    <path d="M241.7..." id="Group" fill="#FFFFFF" stroke="none" />
</a>