SVG-Grafik Farbe ändern

[Robert B.]

Moin,

du kannst SVG mit einem Stylesheet beeinflussen, das im gleichen Dokument liegt. Das ist

• ein svg-Element, das in HTML eingebettet ist
• ein Stylesheet, das sich im SVG-Dokument befindet

• ein SVG-Objekt, das in eine Grafik im HTML-Dokument eingebettet ist

Ein externes SVG ist dagegen ein eigenes Dokument, in das kannst Du - meine ich - nicht hineinstylen.

Das nicht, aber man das SVG im aktuellen Dokument nutzen und stylen …

Bei einem eingebetteten SVG ging es über das Stylesheet des HTML Dokumentes

<style>
#bildlein rect {
   fill: pink;
}
</style>
<h1>Mahlen nach Zalen</h1>
<svg id="bildlein" viewBox="0 0 100 100">
   <g>
      <rect x="10" y="10" width="50" height="20" />
   </g>
</svg>

Aber für ein externes SVG greift das nicht.

Doch:

<style>
rect {
	stroke-width: 2px;
	stroke: silver;
}
#rot {
	fill: #b00;
}
#gruen {
	fill: #115909;
}
#blau {
	fill: #233652;
}
</style>

<svg width="300" height="100">
	<use href="html-css-use.svg#box" id="rot" x="10" y="10"/>
	<use href="html-css-use.svg#box" id="gruen" x="110" y="10"/>
	<use href="html-css-use.svg#box" id="blau" x="210" y="10"/>
</svg>

Man könnte MÖGLICHERWEISE über URL Parameter gehen und diese mit Script im SVG auslesen, aber das ist ziemlich von hinten durch die Brust ins Auge und ich weiß auch nicht, ob die Browser Script in SVG Files bereitwillig ausführen.

Das ist auch viel zu kompliziert bzw. over-engineering.

Viele Grüße
Robert