Enthalten SVG-Datei in SVG

Habe ich einen linearGradient im defs-Bereich meiner SVG-Datei, und verweisen Sie darauf mit fill="url(#myGradientName)". Das funktioniert Super so weit.

Ich denke, ich sollte in der Lage sein, meine ganze defs-Abschnitt in seine eigene SVG-Datei, und dann einfach die Referenz, die von allen SVG-Bildern. Das ist, so etwas wie:

Stile.svg:

<svg xmlns=...>
  <defs>
    <linearGradient id="myGradient" ...>
    </linearGradient>
  </defs>
</svg>

Bild.svg:

<svg xmlns=...>
  <rect width="100" height="100" fill="styles.svg#myGradient"/>
</svg>

Aber ich kann nicht scheinen, um den Stil anzuwenden. Habe ich die falsche syntax für die IDs, die extern auf diese Datei (styles.svg#myGradient)? Muss ich explizit die Datei zuerst irgendwie?

Habe ich schon Gießen über die SVG-Spezifikation und es sieht aus wie sollte dies möglich sein, aber keines der Beispiele wirklich zeigen, dass es getan wird.

Edit: Die FOP-FAQ deutet darauf hin, dass die korrekte syntax ist fill="url(grad.svg#PurpleToWhite)", aber das funktioniert nicht in Gecko oder Webkit. Ist das richtig und niemand unterstützt, oder mache ich etwas anderes falsch?

InformationsquelleAutor Ken | 2009-03-16
  1. 4

    Wie es aussieht wird das nur unterstützt, unter Firefox 3.1.

    • Alle infos zu Opera oder Webkit/Safari/Chrome?
    • Die Frage erwähnt, dass es nicht funktioniert in Webkit. Ich habe nicht versucht, diese in der Oper, aber Gecko scheint haben die meisten ausgereifter SVG-Unterstützung in anderen Bereichen, so wäre ich überrascht, wenn Opera (und niemand sonst) unterstützt, die.
    • Dies Webkit-Bug zeigt, dass dies ein Falsches Verhalten ist noch nicht gelöst, in der auch aktuelle builds von Chrome/Safari. Viele schimpfen auf langlebige fix melden, aber das Problem ist ungelöst und die letzten Betreuer-beenden Sie das Projekt durch einen Interessenkonflikt.. Super...
    InformationsquelleAutor Ken
  2. 3

    Brauchen Sie Sie nicht zu sagen fill="url(styles.svg#myGradient)". Das funktioniert in Firefox 4 beta 6 und Stelle mir vor, es funktionierte in Firefox 3.5. Aber Chrome (7.0.517.41 beta) und die IE9 beta (9.0.7930.16406) noch nicht unterstützen. Es sieht aus wie Sie beide Aussehen, für #myGradient in das aktuelle Dokument anstelle des eigentlich zu der angegebenen URL. Brutto.

    Hier sind die kompletten Dateien, die ich verwendet, um dies zu testen:

    Stile.svg

    <svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="myGradient">
      <stop offset="0" stop-color="red" />
      <stop offset="1" stop-color="black" />
    </linearGradient>
  </defs>
</svg>

    Bild.svg

    <svg xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100" fill="url(styles.svg#myGradient)"/>
</svg>
    • Sie KÖNNTE das tun, aber das würde bedeuten, dass Ihre Gradienten spezifiziert werden inline in das SVG-Dokument. Was, wenn Sie wollten unterschiedliche Verläufe auf mehrere Wiederholungen der gleichen SVG-icon?
    • Das klingt wie ein andere Frage. Ich weiß nicht, die Antwort offhand. Vielleicht fill="currentColor" helfen würde. Wenn Sie darunter ein SVG-Symbol wiederholt mit <img> oder <object> dann es wird nicht Erben die CSS-Eigenschaften aus der Seite stylesheets, aber vielleicht currentColor würde immer noch funktionieren.
    • Ein 2014-update: Test OK, im Firefox aber der Verlauf wird nicht gefunden (geschwärzt) in Chrom. Leider verdirbt die ganze "auch die Stile.svg-Konzept". Eine alternative wäre, diese "defs" dienen-Seite.
    InformationsquelleAutor Jason Orendorff
  3. 1

    Ich glaube, ich kann nur beantwortet deine Frage in diesem thread hier.

    InformationsquelleAutor Christopher Smithson
  4. 0

    Tatsächlich, die FOP-FAQ Recht hat, die richtige syntax umfaßt die URI mit url(...). Gerade überprüft mit meinem Firefox, und es Griffe füllt nur mit umliegenden url(). Wäre es ein bug in Safari oder Opera, wenn die würde behandeln es anders.

    Ich zufällig eingereicht ähnliche Frage, aber mit ebenso wenig Erfolg.

    Cheers,

    InformationsquelleAutor Boldewyn
Schreibe einen Kommentar