ディレクティブとインラインSVG（Firefoxの問題）私のプロジェクトで

Question

次のように、私はインラインsvgsを使用しています：

HTML

<div style="display: none"> 
    <svg xmlns="http://www.w3.org/2000/svg"> 
    <symbol id="dropdown" viewBox="0 0 3.359 1.929"><path d="M1.68 1.929a.29.29 0 0 1-.204-.083L.085.484a.28.28 0 0 1 0-.401.293.293 0 0 1 .409 0L1.68 1.244 2.865.083a.294.294 0 0 1 .41 0 .28.28 0 0 1 0 .401l-1.39 1.361a.3.3 0 0 1-.205.084z"></path></symbol> 
    </svg> 
</div> 
<div one-svg svg-href="'dropdown'"></div> 

JS

var app = angular.module('app', []); 

app.directive('oneSvg', function() { 
    return { 
     templateUrl: 'inline-svg.html', 
     scope: { 
      svgHref: "=", 
      svgClass: "=" 
     } 
    }; 
}); 

inline- svg.html

ここで

<svg ng-class="svgClass"> 
    <use ng-href="{{ '#' + svgHref }}" ng-attr-href="{{ '#' + svgHref }}" href=""></use> 
</svg> 

は、上記で作成したディレクティブは唯一のChromeとIE10ではなく、Firefoxの（V 50.1.0）で働いているfiddle

です。

ディレクティブなしでインラインSVGを追加すると、Firefoxで正常に動作しています。 Firefoxでもディレクティブが動作するように助けてください。

Answer 1

この変更点はPLUNKERを参照してください。
FireFox、Chrome、Safariで動作しました。

HTML：

<svg style="display:none;" xmlns="http://www.w3.org/2000/svg" <svg style="display:none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> 
    <defs> 
    <symbol id="dropdown" viewBox="0 0 3.359 1.929"> 
     <path d="M1.68 1.929a.29.29 0 0 1-.204-.083L.085.484a.28.28 0 0 1 0-.401.293.293 0 0 1 .409 0L1.68 1.244 2.865.083a.294.294 0 0 1 .41 0 .28.28 0 0 1 0 .401l-1.39 1.361a.3.3 0 0 1-.205.084z"></path> 
    </symbol> 
    </defs> 
</svg> 

<div one-svg="dropdown"></div> 

指令：

app.directive('oneSvg', function() { 
    return { 
     template: '<svg ng-class="svgClass"><use xlink:href="{{ \'#\' + href }}"></use></svg>', 
     scope: { 
      href: "@oneSvg", 
      svgClass: "=?" 
     } 
    }; 
});