Ich habe mehrere SVG-Grafiken, deren Farben ich über meine externen Stylesheets ändern möchte - nicht direkt in jeder SVG-Datei. Ich richte die Grafiken nicht ein, sondern speichere sie in meinem Bilderordner und zeige auf sie.

Ich habe sie auf diese Weise implementiert, damit QuickInfos funktionieren, und ich habe sie auch jeweils in eine umhüllt<a> Tag, um einen Link zuzulassen.

<a href='http://youtube.com/...' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a>

Und hier ist der Code der SVG-Grafik:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
    <path d="M28.44......./>
</g>
</svg>

Ich füge folgendes in meine externe CSS-Datei (main.css) ein:

.socIcon g {fill:red;}

Dies hat jedoch keine Auswirkungen auf die Grafik. Ich habe auch versucht .socIcon g path {} und .socIcon path {}.

Irgendetwas stimmt nicht, vielleicht erlaubt meine Implementierung keine externen CSS-Änderungen, oder ich habe einen Schritt verpasst? Ich würde mich sehr über Ihre Hilfe freuen! Ich brauche nur die Möglichkeit, die Farben der SVG-Grafik über mein externes Stylesheet zu ändern, aber ich kann die Tooltip- und Link-Fähigkeit nicht verlieren. (Ich kann jedoch ohne Tooltips leben.) Danke!