Ich möchte, dass ein SVG-Bild (vorgerendert, aber mit js in ein svg-Tag eingefügt, um weitere Manipulationen zu ermöglichen) ein vordefiniertes Muster mithilfe des "pattern" -Tags verwenden kann. Klingt doch einfach, oder? Nun, Chrome (Webkit?) Verhält sich anders als alle anderen Browser, und jetzt bin ich mir nicht sicher, wie dies am besten erreicht werden kann.

Meine Svg sieht so aus:

<svg>
 <defs>
  <pattern id="specialPattern">...</pattern>
 </defs>
 <path class="special"></path>
</svg>

und ich will wege mit der klassespecial "Muster" als Füllung haben.

Versuch eins: Funktioniert in Chrome, nicht in FF oder Opera

Mein erster Versuch war, dies einfach in mein CSS zu schreiben:

 .special { fill:url("#specialPattern");}

Dies funktioniert tatsächlich in Chrome. Wenn Sie jedoch darüber nachdenken, sollte dies wahrscheinlich nicht der Fall sein. Die anderen Browser, die ich ausprobiert habe, interpretieren diese URL als relativ zu der Datei, in der sie sich befindet (die CSS-Datei).Das macht mehr Sinn.

Versuch zwei: Funktioniert in FF und Opera, nicht in Chrome

Nächster Versuch: Geben Sie eine absolute URL für das Muster an.

 .special { fill:url("//example.com/styles/svgWithStyleDeclaration.svg#specialPattern");}

Während dies in FF und Opera wie erwartet funktioniert, setzt Chrome jetzt stattdessen die Füllung zurück (ich habe keine Ahnung, wo genau dieser Stil gesucht wird).

Versuch drei: Arbeiten, irgendwie

Das Inlinen des Stils in der SVG funktioniert an allen Stellen, an denen es den Anschein hat:style="fill:url('#specialPattern')"

Und obwohl ich vermute, dass dies ein Fall ist, in dem die Grenzen zwischen Inhalt und Präsentation verschwimmen, wäre es in meinem Fall zumindest viel besser, Stildeklarationen anderswo aufzubewahren (nicht zuletzt, weil mein SVG dadurch viel größer werden müsste).

Versuch vier: Funktioniert (?) Aber dreckig

Ich habe nicht viele Browser getestet, daher bin ich mir nicht sicher, wie wasserdicht es ist, aber es scheint mir, als würde die Verwendung eines CSS-Hack zur Erkennung von Webkit-Browsern funktionieren:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .special {fill: url("#specialPattern");}
}
 .special { fill:url("//example.com/styles/svgWithStyleDeclaration.svg#specialPattern");}

Jetzt MUSS es einen eleganteren Weg geben, dies zu lösen. Wie soll es gemacht werden?

Bearbeiten: Stellt sich heraus, dass sich der IE hier wie Chrome verhält. Sie müssten also auch sicherstellen, dass der IE <= 9 'fill: url (#specialPattern)' enthält.