nicht angemeldet
Hallo,
ich schreibe gerade an einer SVG-Daten und möchte gerne alle Style-Definitionen draußen haben, in mehrere separaten CSS-Dateien. Das funktioniert auch, bis auf die SVG-Filter. In SVG kann man Filter definieren, die dann auch über die Style-Angaben angewandt werden können. Doch das klappt nicht ganz, wie es eigentlich sollte. Folgendes Szenario:
- es gibt 2 SVG-Dateien und eine 1 CSS-Datei
image.svg
filter.svg
styles.css
- In image.svg und filter.svg sind SVG-Filter mit gleichen Namen definiert, z.B. "filter01". Wenn ich jetzt folgendes in die "styles.css" schreibe und auf beide SVG-Dateien anwende:
.test01
{
fill: url(image.svg#filter01);
}
dann funktioniert es für die Datei image.svg, aber nicht für filter.svg. Wenn ich umgekehrt das schreibe:
.test01
{
fill: url(filter.svg#filter01);
}
dann funktioniert es genau umgekehrt.
Mein Ziel ist es, alle SVG-Filter in die filter.svg zu stecken und nur dort zu pflegen. Allerdings funktionieren diese nicht, wenn ich diese über eine externe CSS in image.svg einzubinden versuche. Nun gibt es natürlich Wege das zu umgehen und z.B. über XSLT die Filter direkt in die image.svg einzubinden. Doch mich interessiert wie man es nur mit Referenzen schafft. Ich habe es bis jetzt mit Firefox 3.0.5 getestet und vermute, dass es auch am Browser liegt, denn logisch gesehen sollte es CSS egal sein wo die Filter liegen, solange der Pfad stimmt. Ich vermute auch, dass Firefox die filter.svg, sofern diese nicht direkt angesprochen, einfach nicht lädt.
Gibt es vielleicht nicht eine Processing Instruction, mit der man die filter.svg Datei Firefox bekannt macht? Oder gibt es einen anderen Weg, externe SVG Filter über CSS einzubinden?
Slawa