SVG - externe Ressourcen

[Rolf B]

Hallo alle,

ich spiele etwas mit SVG herum und ich habe im Prinzip die folgende Struktur:

demo1.svg:

<svg width="800" viewBox="0 0 550 270" xmlns="http://www.w3.org/2000/svg" >
  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet"
        href="common.css" type="text/css"/>

  <style>
    rect.green2 { color: red; }
  </style>

  <use href="demo2.svg#rects" x="0" y="0" width="200" height="100"></use>
</svg>

demo2.svg:

<svg width="800" viewBox="0 0 550 270" xmlns="http://www.w3.org/2000/svg" >
  <style>
    /* Nur als Experiment */
    rect.green2 { color: yellow; }
  </style>

  <symbol id="rects" viewBox="0 0 60 30">
    <rect class="green1" x="5" y="5" width="20" height="20"></rect>
    <rect class="green2" x="35" y="5" width="20" height="20"></rect>
  </symbol>
</svg>

common.css:

rect.green1 {
  fill: lime;
}

Mit Chromium bleiben beide Quadrate schwarz. Mit Firefox wird immerhin das green1-Quadrat grün, also das, das aus dem externen Stylesheet gefärbt wird.

Das andere Quadrat bleibt schwarz. D.h. das interne Stylesheet in demo1 wird auch von Firefox nicht auf das ge-use-te Symbol angewendet. Das externe Stylesheet dagegen schon - sehr merkwürdig.

Wenn ich das #rects-Symbol nach demo1.svg herüberhole und als internes Symbol einbinde, lässt es sich färben. Aber das will ich nicht - ich möchte mir in demo2 eine Figurenbibliothek für mehrere andere SVGs erstellen.

Bevor ich hier Zeter und Buggio schreie - sollte sowas überhaupt klappen? Wenn ich mir diesen Chromium-Bugreport anschaue, bin ich mir nicht mehr so sicher. Aber warum tut's der Fuchs dann mit einem externen Stylesheet, und wie style ich dann Symbole überhaupt?

Meine Figur, die ich da erstellen will, würde nämlich von ein paar Styles sehr profitieren (mit custom properties und calc(...) - das würde mir eine Menge Schreibarbeit sparen).

Rolf