[SVG] Gradient fill importeren vanuit externe SVG file

[Mini-me]

Ik heb een aantal SVG bestanden waarin rectangles worden gedefinieerd die één gemeenschappelijke radialGradient als fill moeten krijgen. Op dit moment definieer ik de gradient in iedere SVG file in de <defs> sectie, maar ik wil dit graag centraal oplossen. Een voorbeeld van een van de files:

XML: main.svg

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="../style/style.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" 
     version="1.1" 
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     onload="init()">
     
  <title>...</title>
  <desc>...</desc>
  
  <defs>
    <radialGradient id="fade_pu" cx="50%" cy="50%" r="100%" fx="50%" fy="50%">
      <stop id="fade_pu_0"   offset="0%"   />
      <stop id="fade_pu_100" offset="100%" />
    </radialGradient>
  </defs>
  
  <g id="components" transform="translate(200,100)">
    <rect id="PT0" class="pu" x="0"   y="45" width="100" height="150" style="fill:url(#fade_pu)" />
    <rect id="PT1" class="pu" x="120" y="45" width="100" height="150" style="fill:url(#fade_pu)" />
    <rect id="PT2" class="pu" x="240" y="45" width="100" height="150" style="fill:url(#fade_pu)" />
  </g>
  
</svg>

Ik moet nu dus expliciet voor iedere rectangle aangeven dat hij een radialGradient fill moet gebruiken die in de <defs> sectie is gedefinieerd. Het zou handiger zijn als ik het fill attribute kon definieren in de CSS file (style.css) zodat alle rectangles van dezelfde class automatisch deze fill krijgen, maar helaas kent CSS geen gradient fills.

Cascading Stylesheet: style.css

rect.pu {
   stroke:       black;
   stroke-width: 1;
/*
   fill:         url(test.svg#fade_pu)
*/
}

#fade_pu_0 {
      stop-color:   white;
      stop-opacity: 0;
}
#fade_pu_100 {
      stop-color:   gray;
      stop-opacity: 1;
}

De radialGradient die wordt gebruikt als fill voor de 3 rectangles kan zelf niet in CSS worden gedefinieerd, omdat CSS geen gradients kent. Daarom wilde ik de <defs> sectie uit de file main.svg in een aparte svg file test.svg zetten en vanuit de style sheet daar naar refereren (zie regel 5 van style.css).

Dit werkt niet onder Firefox; doe ik iets fout, of ondersteunt Firefox dit niet?

[Verwijderd]

De laatste firefox ondersteunt dit maar...:

SVG 1.1 is a big specification and we still have a lot of work to do to fully implement it. If you think you can help us by e.g. tracking down bugs, writing some test-cases or implementing some outstanding features, please get in touch.

Ik denk dat nog in béta fase zit, m.a.w. nog even wachten tot dit volledig ondersteund wordt.
Google is your friend: http://www.mozilla.org/projects/svg/faq.html

[Mini-me]

Bedoel je dat Firefox het volgende niet ondersteunt?

Cascading Stylesheet: style.css

rect.pu {
   fill:         url(test.svg#fade_pu_test)
}

Zoja, is hier een work-around voor? Of ben ik beperkt tot het copy-pasten dat ik tot nu toe steeds heb gedaan?

[Verwijderd]

Haal je CSS es door de validator, dan weet je het direct: http://jigsaw.w3.org/css-validator/

[Mini-me]

Volgens de CSS validator gebruikt mijn style sheet gebruik van aardig wat properties die niet in de CSS2 standaard bestaan, zoals: fill, stroke en stroke-width.
Ik heb de SVG stylling standaard er nog eens bij gepakt, en daar wordt dit inderdaad bevestigd.
Tegelijkertijd wordt overal in de voorbeelden wel gebruik gemaakt (zie bijvoorbeeld hier).

Zo wordt het er niet duidelijker op. Betekent dit, dat slechts een kleine subset van de styling properties in SVG via CSS kan worden gedefinieerd? Dat het toevoegen van een externe style sheet dus ook weinig voordeel heeft?

[Verwijderd]

idd

[Mini-me]

Is er dan überhaupt een manier in SVG om styles uit een andere file te importeren, zodat het niet nodig is om deze keer op keer toe te voegen in de <defs> sectie?

[Verwijderd]

Mini-me schreef op donderdag 25 januari 2007 @ 09:04:
Is er dan überhaupt een manier in SVG om styles uit een andere file te importeren, zodat het niet nodig is om deze keer op keer toe te voegen in de <defs> sectie?

SVG is hoedanook nog geen standaard, dus je kan het nog niet gebruiken...