如何使 SVG 元素可点击？

Question

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

如果不是 Angular，它只需像 <a href="http://example.com"><svg>...</svg></a> 一样将其封装起来即可。但是如果我在 Angular 中做同样的事情，svg 图形就会消失。

我也试过<use>但没有成功：

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

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

Answer 1

您的第一种方法没问题，您只需要一些额外的 CSS：

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

在你的 CSS 中：

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