У меня есть несколько графических файлов SVG, которые я хотел бы изменить цвета через мои внешние таблицы стилей - не напрямую в каждом SVG файле. Я не помещаю графику в строку, но сохраняю ее в папке с изображениями и указывая на них.
Я реализовал их таким образом, чтобы всплывающие подсказки работали, и я также обернул их в тег <a>
, чтобы разрешить ссылку.
<a href='http://youtube.com/...' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a>
И вот код 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>
Я поместил следующее в мой внешний файл CSS (main.css):
.socIcon g {fill:red;}
Однако это не влияет на графику. Я также пробовал путь .socIcon g path {} и .socIcon {}.
Что-то не так, возможно, моя реализация не разрешает внешние модификации CSS, или я пропустил шаг? Я бы очень признателен за вашу помощь! Мне просто нужно изменить цвета изображения SVG через мою внешнюю таблицу стилей, но я не могу потерять подсказку и способность ссылок. (Я могу жить без подсказок.) Спасибо!