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

如何使SVG元素可点击？

1 个答案: