20: Styling Inline SVG – Powers and Limitations

Inline-SVG kann „gestylt“ werden, in dem Sinne, dass es bereits Füllungen und Konturen und dergleichen hat, sobald Sie es auf die Seite stellen. Das ist großartig und eine absolut gute Art, Inline-SVG zu verwenden. Aber Sie können Inline-SVG auch über CSS stylen, was irgendwie großartig ist, weil, stelle ich mir vor, für viele von uns CSS der Ort ist, an dem wir uns stark und wohl fühlen.

Es funktioniert ziemlich so, wie Sie es erwarten würden. Hier ist ein einfaches Beispiel

<svg>
  <rect class="my-rect" ... />
</svg>

.my-rect {
  fill: blue; /* remember it's fill not background, teamsters */
}

CSS hat etwas mehr „Power“, könnte man sagen, als Style-Attribute auf den SVG-Elementen selbst. Wenn dieses <rect> beispielsweise fill="red" hätte, würde das CSS trotzdem „gewinnen“. Sie denken vielleicht das Gegenteil, weil es so scheint, als wären Style-Attribute so mächtig wie Inline-Styles, aber das sind sie nicht. Inline-Styles sind allerdings immer noch mächtig.

Ebenso werden CSS-Regeln nicht weitervererbt, wenn etwas Spezifischeres passiert. Zum Beispiel

<g class="parent">
  <rect fill="blue" />
</g>

.parent {
  fill: red;
}

Das CSS verliert in diesem Fall, weil das Blau spezifischer auf das Rechteck angewendet wird.

Wenn ich SVG über CSS stylen möchte, finde ich es im Allgemeinen am einfachsten, die Style-Attribute ganz wegzulassen.

Wichtiger Hinweis!

Wir haben uns mit <use> beschäftigt. Nehmen wir diese Situation an

<svg>
  <symbol viewport="0 0 100 100" id="thing">
    <rect class="child" ... />
  <symbol>
</svg>

<svg class="parent">
  <use xlink:href="#thing" />
</svg>

Letztendlich wird das „Kind“ in das „Elternteil“ eingefügt, richtig? Richtig. Das sollte also funktionieren?

.parent .child {
  fill: red;
}

Aber es tut es nicht.

So funktioniert <use>: Es klont dieses <symbol> und fügt es in einen „Shadow DOM“ im zweiten SVG ein. Sie können diesen Shadow DOM mit einem solchen Selektor nicht durchdringen. Funktioniert einfach nicht. Vielleicht gibt es eines Tages eine Lösung, aber im Moment nicht.

Sie können Folgendes tun:

.parent {
  fill: red;
}

Und diese Füllung wird durchlaufen und die Kindelemente beeinflussen, wenn nichts Spezifischeres im Weg ist. Oder

.child {
  fill: red;
}

und alle Instanzen dieses Kindes beeinflussen. Aber eben nicht beides.

Wenn Sie unterschiedlich gestylte Versionen desselben Elements benötigen...

Duplizieren Sie einfach das <symbol> oder was auch immer Sie brauchen. Die überwiegende Mehrheit der Informationen wird identisch sein, und GZip frisst identischen Text zum Frühstück.