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

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

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

    JürgenB Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    Hallo,

    prüf mal in den Entwicklertools, wo die CSS-Datei gesucht wird. Ich vermute ein Problem mit dem Pfad.

    Und dann mach dir noch den Unterschied zwischen Text und Überschrift klar.

    Gruß
    Jürgen

    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

  2. Externe CSS Datei in .svg Datei

    Matthias Scharwies (Versionen)
    +3 Informationen zu den Bewertungsregeln

    Servus!

    Hallo,

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

    SVG ist eine Markup-Sprache für Grafik-Dokumente, in denen du andere Ressourcen wie externe Grafiken, Stylesheets und auch Scripts laden kannst.

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

    index.html

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

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

    Du lädst ein externes img in deine Webseite. Aus Sicherheitsgründen kann so ein Bild keine weiteren externen Ressourcen laden.

    → Bugzilla

    Du kannst das Bild selbst nicht verändern, aber evtl. in der Darstellung den Farbton ändern:

    filter: hue-rotate(90deg);

    Ich persönlich würde Icons entweder als SVG-Hintergrundbild oder als SVG-Fragment im HTML-Dokument integrieren.

    Herzliche Grüße

    Matthias Scharwies

    --
    25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
    Beitrag melden
    +3
    Informationen zu den Bewertungsregeln