Inline-SVG kann in dem Sinne „gestylt“ werden, dass es bereits Füllungen und Striche enthält und nicht in der Sekunde, in der Sie es auf die Seite setzen. Das ist großartig und eine absolut gute Möglichkeit, Inline-SVG zu verwenden. Sie können Inline-SVG aber auch über CSS stylen, was ein bisschen fantastisch ist, denn ich stelle mir für viele von uns vor, dass wir uns in CSS leistungsfähig und komfortabel fühlen.
Es funktioniert ziemlich genau so, wie Sie es erwarten würden. Hier ist ein einfaches Beispiel:
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )Man könnte sagen, CSS hat ein bisschen mehr Leistung als Stilattribute für die SVG-Elemente selbst. Wenn das wie gehabt fill="red"auf sie würde die CSS noch „gewinnen“. Sie könnten das Gegenteil denken, weil es so aussieht, als wären Stilattribute mächtig wie Inline-Stile, aber das sind sie nicht. Inline-Stile sind jedoch immer noch leistungsstark.
Ebenso kaskadieren CSS-Regeln nicht, wenn überhaupt etwas Spezifischeres passiert. Zum Beispiel:
.parent ( fill: red; )Das CSS verliert in diesem Fall, weil das Blau spezifischer auf das Rechteck angewendet wird.
Wenn ich vorhabe, SVG über CSS zu formatieren, finde ich es im Allgemeinen am einfachsten, Stilattribute vollständig von den SVG-Elementen wegzulassen.
Wichtig zu wissen Alarm!
Wir haben viel Zeit damit verbracht, darüber zu reden . Sagen Sie, das ist die Situation:
Letztendlich wird dieses "Kind" in dieses "Elternteil" hineingelegt, oder? Richtig. Das sollte also funktionieren?
.parent .child ( fill: red; )Aber das tut es nicht.
So wie es funktioniert, klont es das und fügt es in diesem zweiten SVG in ein „Shadow DOM“ ein. Mit einem solchen Selektor können Sie dieses Schatten-DOM nicht durchdringen. Funktioniert einfach nicht. Vielleicht wird es eines Tages eine Lösung geben, aber momentan gibt es keine.
Sie können wie folgt tun:
.parent ( fill: red; )Und diese Füllung wird durch die untergeordneten Elemente kaskadieren und diese beeinflussen, wenn nichts Spezifischeres im Weg ist. Oder
.child ( fill: red; )und alle Instanzen dieses Kindes betreffen. Aber nur nicht beides.
Wenn Sie unterschiedlich gestaltete Versionen derselben Sache benötigen ...
Dupliziere einfach das oder was auch immer du brauchst. Die überwiegende Mehrheit der Informationen ist identisch, und GZip isst zum Frühstück identischen Text.