Manipulieren externer SVG-Dateistileigenschaften mit CSS

Sandboxing-Problem in SVG-Dateien

Wann Wenn Sie mit externen SVG-Dateien arbeiten, kann es zu Einschränkungen kommen, wenn Sie versuchen, interne SVG-Eigenschaften wie Füllung oder Strich mithilfe von CSS zu manipulieren. Dies ist auf eine Funktion in SVG-Dateien zurückzuführen, die als „Sandboxing“ bekannt ist und den direkten Zugriff auf den SVG-Inhalt von externen Quellen einschränkt.

Deckkraft im Vergleich zu anderen Eigenschaften

Die Deckkraft ist ein einzigartiges Attribut, da sie sich auf das SVG-Objekt/Frame als Ganzes und nicht nur auf dessen Inhalt auswirkt. Dadurch kann CSS die Deckkraft ändern, auch wenn es nicht auf den internen SVG-Inhalt zugreifen kann.

Lösungen für Manipulationseinschränkungen

Sie können zwar interne SVG-Eigenschaften nicht direkt von CSS aus bearbeiten Es gibt zwei Hauptlösungen, die Sie erkunden können:

1. Icon-System (Font-Face oder SVG-Sprites)

Ein Icon-System beinhaltet die Konvertierung Ihrer SVGs in eine spezielle „Icon“-Schriftart oder ein SVG-Sprite-Format. Dadurch können Sie die Symbole mithilfe einer Schriftart oder eines Hintergrundbilds referenzieren und CSS-Stile auf sie anwenden.

2. Direkte CSS-Änderung über Inline-SVG

Während dies für externe SVG-Dateien nicht empfohlen wird, können Sie SVG-Code direkt in Ihren HTML-Code einbetten und CSS-Stile mithilfe des style-Attributs im SVG-Code selbst anwenden.

Fazit

Das Bearbeiten interner SVG-Eigenschaften über CSS ist aufgrund des Sandboxing-Mechanismus nicht einfach. Durch den Einsatz von Icon-Systemen oder in Ausnahmefällen durch direkte CSS-Änderungen über Inline-SVG können jedoch ähnliche Ergebnisse wie durch Inline-CSS-Manipulationen erzielt werden.