SVG <use> Chromeで動作しません。

Question

svg-spriteによるアイコンベースのナビゲーションを備えたSAP（AngularJSとAngular Route）があります。だから、私のようなHAVAインラインコード：

<div style="height: 0; width: 0; position: absolute; visibility: hidden"> 
<svg xmlns="http://www.w3.org/2000/svg"> 
    <symbol id="icon-grid-32" viewBox="0 0 32 32"> 
     <g stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke-linejoin="round"> 
      <path d="M2 2h11v11H2zM19 2h11v11H19zM2 19h11v11H2zM19 19h11v11H19z"/> 
     </g> 
    </symbol> 
</svg> 
</div> 

そして、このようなナビゲーションのアイコン：

<a href=""><svg class="icon icon-32 outline black"><use xlink:href="#icon-grid-32"></use></svg></a> 

私は、このナビゲーションで見ることができるすべては<use>はサイズ0×0ピクセルを持って、何もありません。私はFirefox bug with xml:baseについて知っていますが、xml：baseを追加しても役に立たなかった。この例を試すことができます：http://css.yoksel.ru/assets/demo/svg-in-firefox/svg-has-base.html

Firefox、Safariなどのブラウザでは動作しますが、Chrome 49+では動作しません（48バージョンではこの問題はありません）。

Answer 1

私はアイコン<svg>と<use>をディレクティブに生成するという点で、あなたが説明したものと実際に似た問題を経験していました。

私は今日のより良いところの答えを探していて、<use>とxlink:hrefの問題の回避策を考え出しました。これは、単に目的のSVGをインライン展開することによって機能を再現します。

angular.module('angularIcon', []) 
.directive('angularIcon', IconDirective); 

function IconDirective(){ 
    return{ 
     template:'', 
     templateNamespace:'svg', 

     link:function(scope, element, attributes){ 

      // my icon name comes from $http call so it doesnt exist when initialising the directive, 
      attributes.$observe('iconName', function(iconName){ 

       // let's grab the icon from the sprite 
       var icon = angular.element(document.getElementById(iconName)); 
       // let's clone it so we can modify it if we want 
       var iconClone = icon.clone(); 

       var namespace = "http://www.w3.org/2000/svg"; 

       // manually create the svg element and append the inlined icon as no other way worked 
       var svg = document.createElementNS(namespace, 'svg'); 
       svg.setAttribute('viewBox', '0 0 32 32'); 
       svg.setAttribute('xml:space', 'preserve'); 

       svg.appendChild(iconClone[0]); 
       // let's add the newly created svg+icon to the directive's element 
       element[0].appendChild(svg); 

      }); 

     }, 
     scope:{ 
      iconName: '@' 
     } 
    } 
} 

Answer 2

これを：簡単のため

はのは、私は次のように icon-name

<angular-icon icon-name="{{someObject.iconName}}">

作業ディレクティブは今に見える属性によってアイコンの名前を受け取り<angular-icon>ディレクティブを持っているとしましょう<base href="/" />というAngularJSの依存関係とUIルーティングの組み合わせによって発生します。アプリケーションがルート状態でない場合、の相対ハッシュリンク要素が正しく解決されませんでした。

これを回避するには、絶対パスを使用するようにxlink:hrefを解決する必要があります。あなたは、次の操作を行うことがあります。

角度-アイコン-template.html

<svg class="c-icon" viewBox="0 0 32 32"> 
    <use xlink:href="" ng-attr-xlink:href="{{baseUrl + '#' + iconName}}" /> 
</svg> 

角度-icon.js

angular.module('angularIcon', []) 
    .directive('angularIcon', { 
     templateUrl: 'angular-icon-template.html', 
     scope: { iconName: '@' }, 
     controller: function($scope) { 
      $scope.baseUrl = window.location.href.replace(window.location.hash, ''); 
     } 
    });