Clip-Pfad nicht ordnungsgemäß in SVG-Sprite angezeigt, wenn "Verwendung"

Question

Ich versuche, ein Sprite-Blatt aus einer Reihe von Symbolen zu hacken. Ich weiß fast nichts über SVG. Ich kann die einfachen Symbole verwenden, aber ein Symbol mit einem Clip-Pfad wird nicht richtig angezeigt. Von dem, was ich sagen kann, scheint es, dass es nicht den Clip-Pfad verwendet.

Das Sprite funktioniert in JsFilddle und es funktioniert, wenn ich nur die SVG auf eigene und laden Sie eine < verwenden> Anweisung in der SVG. Aber wenn ich eine separate < benutze> es funktioniert nicht.

Alle meine Tests hat in Chrome (50.0.2661.94)

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

Ich verwende es wie so geschehen:

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

Wenn ich die gesonderte Erklärung es wie folgt aussieht:

Aber es sollte wie folgt aussehen:

Der Farbunterschied ist nicht relevant, es ist nur der Hintergrund, wenn das Bild aufgenommen wurde.

Edit:

Ich habe gerade entdeckt, dass, wenn ich das ganze Blatt Sprite in die Seite HTML-Dump und lokal anstelle einer externen Datei verweisen es funktioniert. Ich weiß also nicht, was mit meiner externen Referenz falsch ist.

z.B.

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

gegen

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

Dies funktioniert für mich als Ausweich, aber ich würde lieber eine externe SVG-Datei haben, anstatt es in meinem HTML einzubetten.

Edit 2:

Wenn das SVG-Sprite Blatt im HTML eingebettet wird direkt an den externen Link mithilfe zeigt das Symbol richtig.

Answer 1

Dies scheint ein Browser-Support-Problem zu sein. Die Verwendung der externen Referenz funktioniert wie erwartet in Firefox. Chrome verarbeitet keine Clippfade und einige andere Funktionen in externen Referenzen. Es gibt einen hervorragenden Fehlerbericht. Safari unterstützt es auch nicht.

Verwandte Stackoverflow-Ticket: Why can't I reference an SVG linear gradient defined in an external file (paint server)?

offenen Bugs sind: https://code.google.com/p/chromium/issues/detail?id=109212 https://bugs.webkit.org/show_bug.cgi?id=105904