Mam kilka grafik SVG, które chciałbym zmodyfikować za pomocą moich zewnętrznych arkuszy stylów - nie bezpośrednio w każdym pliku SVG. Nie umieszczam grafiki w linii, ale przechowuję je w folderze obrazów i wskazując na nie.

Zaimplementowałem je w ten sposób, aby umożliwić działanie podpowiedzi, a także pakowałem je w<a> tag, aby umożliwić link.

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

A oto kod grafiki SVG:

<?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>

W moim zewnętrznym pliku CSS (main.css) umieściłem następujące informacje:

.socIcon g {fill:red;}

Nie ma to jednak wpływu na grafikę. Wypróbowałem także ścieżkę .socIcon g {} i .socIcon {}.

Coś jest nie tak, być może moja implementacja nie zezwala na zewnętrzne modyfikacje CSS, albo pominąłem krok? Naprawdę byłbym wdzięczny za pomoc! Po prostu potrzebuję możliwości modyfikowania kolorów grafiki SVG za pomocą mojego zewnętrznego arkusza stylów, ale nie mogę stracić podpowiedzi i zdolności do łączenia. (Mogę jednak żyć bez podpowiedzi.) Dzięki!