"使用"を使用しているときにクリップパスがSVGスプライトで正しく表示されない

Question

私は一連のアイコンからスプライトシートをハックしようとしています。私はSVGについてほとんど何も知らない。シンプルなアイコンを表示させることはできますが、クリップパスのアイコンが正しく表示されません。私はそれがクリップのパスを使用していないようだと私が言うことができるから。

スプライトはjsfilddleで動作し、SVGを独自のものにロードしてSVGに< use>ステートメントを含めると動作します。しかし、私は別の<使用している>それは動作しません。

すべての私のテストは

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <defs> 
    <clipPath id="folder-clip-0"> 
     <path d="..." /> 
    </clipPath> 

    <symbol id="folder" viewBox="0 0 32 32"> 
     <g class="container" data-width="32" data-height="27" transform="translate(0 2)"> 
     <path d="..." class="..." /> 
     <path class="..." d="..." /> 
     <path clip-path="url(#folder-clip-0)" d="..." class="..." /> 
     </g> 
    </symbol> 
    </defs> 
</svg> 

（50.0.2661.94）Chromeで行われてきた私はそうのようにそれを使用しています：私は別のステートメントを使用する場合

<svg> 
    <use 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xlink:href="/img/path/sprite.svg#folder"> 
    </use> 
</svg> 

それは次のようになります。

しかし、それは次のようになります。

色の違いは、画像が撮影されたばかりの背景だ、関係ありません。

編集：

私はちょうど私がページのHTMLに全体のスプライトシートをダンプし、代わりにそれが動作する外部ファイルのローカルでそれを参照する場合ことを発見しました。だから私は私の外部参照に何が間違っているのか分からない。

<svg> 
    <use xlinkHref={"/img/path/not/work/sprite.svg#folder"}></use> 
</svg> 

対

<svg> 
    <symbol id="folder"></symbol> 
</svg> 
<svg> 
    <use xlinkHref={"#folder"}></use> 
</svg> 

これはフォールバックとして私のために動作しますが、私はむしろ代わりに私のHTMLの中に埋め込む外部SVGファイルを持っていると思います。

編集2：

SVGスプライトシートが直接外部リンクを使用してHTMLに埋め込まれている場合、正しくアイコンが表示されます。

Answer 1

これはブラウザサポートの問題です。外部参照を使用すると、Firefoxで正常に動作します。クロムは外部参照のクリップパスやその他の機能を処理しません。未解決のバグレポートがあります。 Safariはそれをサポートしていません。

関連StackOverflowのチケット：Why can't I reference an SVG linear gradient defined in an external file (paint server)?

オープンバグ： https://code.google.com/p/chromium/issues/detail?id=109212 https://bugs.webkit.org/show_bug.cgi?id=105904