Firefox SVG mit fill:url(#id) Stil im externen stylesheet gebrochen, inline-styles sind in Ordnung

In Firefox nur, wenn ich versuche zu geben, einen svg-Pfad eines pattern-Verweis wie:

Pfad {
fill: url(#ref);
}

in einem externen Stylesheet, macht es unsichtbar. Wenn ich es Tue, inline -, oder in einen tag auf der Seite, es funktioniert.

Hier ist meine Geige vom Hals, und hier ist mein code dump weil SO wird nicht lassen Sie mich einfach nur die Geige.
http://jsfiddle.net/v5VDp/1/

    <pattern id="texture_base" x="0" y="0" patternUnits="userSpaceOnUse" height="122" width="213">
        <image x="0" y="0" width="213" height="122" xlink:href=""/>
    </pattern>

        <pattern id="texture1" x="0" y="0" patternUnits="userSpaceOnUse" height="122" width="213">
        <rect fill='url(#color1)' stroke="none" x="0" y="0" width="213" height="122"/> 
            <rect fill='url(#texture_base)' x="0" y="0" width="213" height="122"/ />

    </pattern>
</defs>
</svg>

.Scheibe:nth-child(6n + 2) path {
fill: url(#texture1);
}

https://dl.dropbox.com/s/wkzaoiwnw6ghsmd/simple_svg_test.css

InformationsquelleAutor Daniel | 2013-04-05
  1. 8

    #texture1 ist die Abkürzung für <url of this file> + #texturl. Also in einem externen stylesheet #texture1 zeigen wird, etwas in der stylesheet selbst, die nicht gefunden werden, da sich das element in die svg-Datei.

    Webkit hat immer das falsche, die viel Verwirrung verursacht. Sollten Sie feststellen Oper entspricht Firefox Verhalten wie IE.

    Wenn Sie möchten, tun Sie dies in der stylesheet müsstest du eine absolute URL wie z.B. url(http://jsfiddle.net/v5VDp/1/#texture1)

    Dies ist abgedeckt durch die CSS-Spezifikation. Sie könnte jederzeit Kontakt zu den Der CSS-Arbeitsgruppe und vorschlagen, dass Sie etwas über es tun.

    • So, wie ich beziehen sich auf den aktuellen dom im externen Stylesheet? Das scheint ziemlich counter-intuitive
    • Sie die Regeln für CSS-stylesheets. Sie waren nicht wirklich geschrieben, mit SVG-use-cases Sinn, denke ich.
    • Ich sehe, Sie kommentieren viel des firefox-bugs rund um diesen Fall... ich verstehe, dass die stylesheet-Spezifikation besagt, dass Sie wie auf urls verweisen, aber Sie sind im Grunde zwingt mich, jede svg-Stile, die ich haben könnte, inline auf der Seite... scheint, wie der Kompromiss Chrome/webkit, ist der logische.
    • oder zumindest geben Sie mir eine option, um ihn zu zwingen
    InformationsquelleAutor Robert Longson
  2. 2

    SVG "fill: url(#...)" seltsam Verhalten im Firefox, wenn wir die Zuordnung der unter code mit css(externe und interne css.)

    #myselector {
fill: url('#gradient-id');
}

    Lösung

    geben, inline-styling, diese kann getan werden, beide Möglichkeiten. Statische oder dynamische Weise

    Dynamische Weise

    .attr('fill', 'url(#gradient-id)')

    Statische Weise

    fill="url(#gradient-id)"

    In statische, müssen Sie diese in den SVG-Html;

    • Dies funktioniert so gut,das Ersetzen der css-code mit js.
    InformationsquelleAutor Shailender Singh
Schreibe einen Kommentar