CSS, SVG und externe SVG-Filter

[Slawa Weis]

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

[ThomasM]

Hallo Slawa,

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?

Funktioniert es mit Opera wie gewünscht? Stelle ansonsten testfähigen Code zur Verfügung.

Grüße,
Thomas

[Slawa Weis]

Hallo Slawa,

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?

Funktioniert es mit Opera wie gewünscht? Stelle ansonsten testfähigen Code zur Verfügung.

Grüße,
Thomas

Hallo Thomas,

danke für die Antwort. Mit Opera 9.63 habe ich es gerade ausprobiert, der selbe Effekt. Hier ein Beispielquelltext:

----- jeweils für image.svg und filters.svg der selbe Text:

<?xml version="1.0" encoding="ISO-8859-1" ?>

<?xml-stylesheet type="text/css" href="styles.css" ?>

<svg:svg version="1.0"
         xmlns:svg="http://www.w3.org/2000/svg"
         width="100%" height="100%"
         >

svg:defs
    <svg:linearGradient id="filter01">
      <svg:stop offset="0" stop-color="#b7ed82" />
      <svg:stop offset="1" stop-color="#004c00" />
    </svg:linearGradient>
  </svg:defs>

<svg:rect class="test01" x="0%" y="0%" width="100%" height="100%" />

</svg:svg>

----- styles.css

.test01
 {
/* fill: url(image.svg#filter01);*/
 fill: url(filters.svg#filter01);
 }

Die Idee hinter dem Ganzen ist, dass letztendlich in der image.svg nur das Rechteck ist, in der filters.svg nur der Filter und in der CSS Datei die Verknüpfung zwischen den beiden.

Slawa

[ThomasM]

Hallo Slawa,

Die Idee hinter dem Ganzen ist, dass letztendlich in der image.svg nur das Rechteck ist, in der filters.svg nur der Filter und in der CSS Datei die Verknüpfung zwischen den beiden.

Es funktioniert bei mir im IE7 + ASV 6.0 mit einem grünen Farbverlauf, unter Opera 9.63 und FF 3.0.5 hingegen nicht. Dann doch besser dynamisch erzeugen und intern belassen.

Grüße,
Thomas