Angularjs 如何使SVG元素可点击？

角度1.6

我希望使以下SVG元素可单击：

         <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="0 0 30.2 34.1" 
            style="enable-background:new 0 0 30.2 34.1;" xml:space="preserve">
            <rect x="19.4" y="0" width="10.8" height="5.4"/>
            <rect x="19.4" y="14.3" width="10.8" height="5.4"/>
            <rect x="19.4" y="28.7" width="10.8" height="5.4"/>
            <rect x="0.2" y="0" width="10.8" height="5.4"/>
            <rect x="0.2" y="14.3" width="10.8" height="5.4"/>
            <rect x="0.2" y="28.7" width="10.8" height="5.4"/>
          </svg>

如果没有角度，它只需像这样将其封闭即可。但是如果我在角度上也这么做，svg图形就会消失

我还尝试了

，但没有成功：

<svg ...>
<use xlink:href="" ng-attr-xlink:href="{{$ctrl.menu.channels}}" />
...
</svg>

...

---

如何使我的svg元素可点击并附加链接？

您的第一种方法还可以，您只需要添加一点CSS：

<a href="#" class="svg">
  <svg version="1.1" id="Layer_1">...</svg>
</a>

---

我试过你的解决办法。在将svg图标封装在

标记中后，我看不到它。你有我可以看的plunker或fiddle吗@崔西：我在一辆普朗克车上试过，它很管用。我认为有一些CSS规则隐藏了我应用程序中的svg图标。实际上，即使没有这些额外的CSS内容，它也可以工作，我只是将svg括在

中。现在我需要找到一个隐藏它的规则：）

a.svg:after {
  content: ""; 
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
}