CSS, SVG und externe SVG-Filter

[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