如何使SVG元素可点击？

Question

角度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;
}