SVG-Verwendung und Farbverläufe als Füllung

Question 1

Ich habe versucht, meine SVG-Symbole in eine Datei zu externalisieren und sie mit Markup wie zu referenzieren <svg><use xlink:href="file.svg#icon" /></svg>. Theoretisch funktioniert das sehr gut, aber verschiedene Browser haben Probleme mit dem Rendern. Alle Browser sind in der Lage, das SVG korrekt darzustellen, wenn auf das Symbol mit verwiesen wird <use> innerhalb der Datei und öffnen Sie die URL der SVG-Datei direkt.

Kurz gesagt, gibt es eine browserübergreifende Möglichkeit, SVG zu erhalten linearGradients arbeiten als Füllungen für Elemente, wenn auf die Symbole mit verwiesen wird <svg><use/></svg> im Markup?

Ich habe einen Plunker eingerichtet, der das Problem demonstriert:
http://plnkr.co/edit/feKvZ7?p=preview

Vereinfacht sieht das Markup wie folgt aus:

<!DOCTYPE html>
    <html>
      <body>
        <h1>SVG sprite test</h1>
        <svg width="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <use xlink:href="icon.svg#icon" />
        </svg>
      </body>
    </html>

Und die SVG-Datei sieht so aus:

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <linearGradient id="gradient">
          <stop offset="0" stop-color="black" />
          <stop offset="1" stop-color="white" />
        </linearGradient>
      </defs>
      <symbol id="icon" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="40" stroke="black" fill="url(#gradient)" />
      </symbol>
    
      <use id="iconuse" xlink:href="#icon" width="100" height="100" />
    
    </svg>

So sieht es in den verschiedenen Browsern aus:

Question 2

Versuchen Sie es mit dem nächsten (so stellt Inkscape die Implementierung von Farbverläufen bereit):

<linearGradient id="gradient">
  <stop
     style="stop-color:black;"
     offset="0"/>
  <stop
     style="stop-color:white;"
     offset="1" />
</linearGradient>
...
<path
   style="fill:url(#gradient); ...

Question 3

Das symbol -Tag wird verwendet, um die darin enthaltenen Elemente zu verbergen. Elemente innerhalb der symbol werden mit dem aufgerufen <use> Befehl durch ihren eindeutigen Indikator.
Daher ist es besser, diese Methode zum Aufrufen einzelner Elemente zu verwenden, anstatt das Ganze aufzurufen symbol

Darüber hinaus Elemente bei der Verwendung <use> fallen in die shadow DOM und die Verwendung von CSS wird in einigen Fällen unmöglich
Daher ist es besser, alle internen Stile innerhalb des Symbols zu löschen und sie direkt dem zuzuweisen use Befehl

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="gradient">
      <stop offset="0" stop-color="black" />
      <stop offset="1" stop-color="white" />
    </linearGradient>
  </defs>
  <symbol  id="icon"  viewBox="0 0 100 100"> 
    <circle id="circle" cx="50" cy="50" r="40"   />
     <rect id="rect" x="100" y="10" width="100" height="100" />
  </symbol>

  <use class="iconuse" xlink:href="#circle" width="100" height="100" fill="url(#gradient)" stroke="black" />
     <use class="iconuse" xlink:href="#rect" width="100" height="100" fill="url(#gradient)" />
</svg>

Question 4

vielleicht versuchen Sie es mit

<img src="https://stackoverflow.com/questions/44235845/name.svg">