SVG要素をクリック可能にするには？

Question

角1.6

私は、次のSVG要素のクリック可能なようにしたい：それは単にこの<a href="http://example.com"><svg>...</svg></a>ようにそれを囲むことによって動作角度のない場合は

  <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で同じことをすると、SVGグラフィックは単に消えてしまいます。

はまた、私は成功しません<use>を試してみました：

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

をそれへのリンクを取り付けるクリッカブル私のSVG要素を作るためにどのように？

Answer 1

あなたの最初のアプローチはOKだった、あなただけの追加の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; 
}