ebody: Externe CSS Datei in .svg Datei funktioniert, wenn man die Datei selbst öffnet, aber nicht, wenn die .svg Datei in HTML eingebunden ist

Beitrag lesen

SELF-Forum

Externe CSS Datei in .svg Datei funktioniert, wenn man die Datei selbst öffnet, aber nicht, wenn die .svg Datei in HTML eingebunden ist

ebody
– Informationen zu den Bewertungsregeln

Hallo,

ich möchte die Farbe eines Icons ändern. Das Icon ist eine .svg Datei.

In einer CSS lege ich die Formatierung für das Icon fest:

css/style.css

.icon{
    fill: red;
}

Die CSS Datei binde ich in die .svg Datei ein:

img/icon.svg

<svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg">
    <style>
        @import url(../css/style.css);
    </style>
    <path class="icon"...
</svg>

Ziehe ich die svg Datei in ein Browser Fenster, wird das Icon rot angezeigt, so wie es sein soll.

Binde ich die svg Datei jetzt aber in ein HTML Dokument ein...:

index.html

<body>
 <img src="img/icon.svg" alt="icon">
</body>

...wird es schwarz (original Farbe) angezeigt. Ich habe den Pfad von der eingebundenen CSS Datei in der svg Datei schon in verschiedene Varianten geändert, aber das hat auch nicht geholfen.

Hat jemand eine Idee, warum die svg Datei im HTML Dokument nicht rot dargestellt wird?

Gruß ebody

Beitrag melden
–
Informationen zu den Bewertungsregeln