Warum kann ich nicht auf einen linearen SVG-Farbverlauf verweisen, der in einer externen Datei (Paint-Server) definiert ist?

Question

haben Sie einen Blick auf diese Pen:

http://codepen.io/troywarr/pen/VYmbaa

Was ich hier mache ist:

• ein SVG Symbol definieren (<symbol>)
• eine SVG-linearen Gradienten definieren (<linearGradient>)
• Verwenden Sie das <use> Element, um das SVG-Symbol zu referenzieren, das ich erstellt habe
• in der CSS, die zwei Klassen:
  • external, die die linearen Gradienten in this external .svg file (rechts Quelle klicken und Ansicht)
  • internal, die die linearen Gradienten in dem lokalen HTML definiert verweisen definiert verweist (die , glaube ich, effektiv identisch mit dem in der externen Datei)

Weil ich die internal Klasse das <svg> Element am Boden angewandt habe o Im HTML-Beispiel wird der Farbverlauf angewendet, wobei ein blaues Farbverlaufs-Häkchen angezeigt wird. Das ist es wonach ich suche.

Aber, wenn Sie die internal Klasse external im HTML-Beispiel zu wechseln, ist das Häkchen nicht mehr sichtbar:

http://codepen.io/troywarr/pen/vEymKX

Als ich Chrome Inspector Registerkarte „Netzwerk“ sehen, ich sehe nicht, der Browser versucht, die SVG-Datei überhaupt zu laden. Gibt es ein Problem mit meiner Syntax oder geht hier etwas anderes vor?

Es mindestens sieht wie ich das richtig mache, basierend auf einigen Referenzen, die ich gefunden habe:

• http://www.w3.org/TR/SVG/painting.html#SpecifyingPaint
• http://www.w3.org/TR/SVG/linking.html#IRIReference
• https://stackoverflow.com/a/7118142/167911

Aber , nichts, was ich bisher versucht habe, erlaubte mir, einen linearen Gradienten zu referenzieren, der in einem externendefiniert wurde 10 Datei.

Danke für jede Hilfe!

Answer 1

Nach mehr Forschung scheint es, dass dies ein Browser-Support-Problem ist. Siehe:

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

Leider komme ich würde über this question vor meinem Posting, und hatte gedacht, dass sicher in 5-1/2 Jahren, Browser-Unterstützung hätte gefangen up - aber das scheint nicht der Fall zu sein.

Seit 2015 sind Firefox und Opera offensichtlich die einzigen beiden Browser, die dies in irgendeiner Weise unterstützen.

Zurück zum Zeichenbrett ...

Answer 2

können Sie svg4everybody verwenden mit polyfill: true Option, werden alle externen Symbole statt use Tags einfügen. Aber es wird das zweite Laden von svg verursachen.

So können Sie Svg mit einer Ajax-Anfrage herunterladen und dann auf der Seite mit den Stilen verstecken.

<script>var ajax=new XMLHttpRequest;ajax.open("GET","/img/svg-sprite.svg",!0),ajax.send(),ajax.onload=function(a){var b=document.createElement("div");b.classList.add("hidden"),b.innerHTML=ajax.responseText,document.body.insertBefore(b,document.body.childNodes[0])};</script> 

In diesem Fall:

/img/svg-sprite.svg - ist Ihr svg Weg.

.hidden Klasse Stile:

.hidden { 
    position: absolute !important; 
    width: 1px; 
    height: 1px; 
    overflow: hidden; 
    clip: rect(1px, 1px, 1px, 1px); 
} 

Und Ihr Code könnte wie folgt aussehen:

<svg><use xlink:href="#logo"></use></svg>