Я хочу манипулировать SVG с помощью CSS, и я только что узнал, что могу добавить идентификатор к элементу SVG и сделать это, но размещение SVG в HTML действительно беспорядочно. Мой вопрос: если я загружу SVG с тегом изображения и добавлю идентификатор в код файла SVG, будет ли ID работать одинаково?Могу ли я добавить идентификаторы элементов SVG в SVG-файл так же, как и встроенный код?
Как вы могли и не могли реализовать, CSS не работает через границы документов. Поэтому, если ваш SVG находится в отдельном файле, вы не можете стилизовать его с помощью CSS в своем HTML. Является ли это <img> или <object>.
Если вы хотите стилизовать SVG с помощью CSS, у вас есть два варианта:
(1), вставит SVG в HTML или
(2) добавить CSS стилей в самой SVG-файла , Вы можете использовать <style> элемент, или вы можете ссылаться на внешнюю таблицу стилей от SVG:
<?xml-stylesheet type="text/css" href="my_svg_styles.css" ?>
Однако внешние ссылки, как это не будет работать, если вы встраивание SVG с <img> или background-image. Существуют специальные правила конфиденциальности, запрещающие это. Все файлы изображений, на которые ссылается <img>, должны быть автономными.
Или (3) внедрить CSS во время выполнения в SVG с помощью javascript. –
Интересный вопрос: я только недавно начал использовать CSS с встроенным SVG (через d3.js), и это отличный способ сохранить цветовые схемы согласованными и гибкими. Я пробовал несколько тестов с внешними файлами после прочтения вашего вопроса, без успеха. Согласно [этому вопросу] (http://stackoverflow.com/questions/18434094/how-to-style-svg-with-external-css), это, вероятно, невозможно, если вы не добавите CSS в файл SVG. –
Я сделал дальнейшие исследования и нашел, что это можно сделать! Нужно встраивать svg через тег 'object' - см. Этот урок: https://css-tricks.com/using-svg/ - Я хочу дать кому-то еще шанс ответить на это, если они уже могут работать над ним , –