Лучшая практика использования изображений SVG?

В моем исследовании появилось несколько способов вставки SVG-изображений внутри html-страницы. Использование является самым простым, но неспособным раскрасить значки, что является моей основной потребностью. Итак, я прочитал об использовании но это все еще не позволяет мне стилизовать его с помощью команды css fill. Помещение основной части данных также неприемлемо, так как я хочу использовать изображения в качестве отредактированных изображений.

Я также читал о решении jQuery, но я использую angularJS.

Итак, я много читал о возможностях SVG Icons, и о том, насколько они лучше, чем о старых сценариях PNG-Sprite или IconFonts. но, к сожалению, я не могу найти хорошую ссылку для ее использования. Может ли кто-нибудь помочь мне здесь?

Пробовал это уже, это не работает:

HTML:

  

CSS:

 #myImage { fill: #fff; } 

Для manupulation прочитайте Как изменить цвет изображения SVG с помощью CSS (замена изображения SVG jQuery)?

Для внедрения у вас есть 3 варианта: –

Скажем, что image.svg содержит этот круг в красном цвете:

Чтобы манипулировать этим цветом, попробуйте эту функцию: ColObj('myObj','blue') , ColObj('myEmb','blue') или ColObj('myIfr','blue')

 function getSubDocument(embedding_element) { if (embedding_element.contentDocument) { return embedding_element.contentDocument; } else { var subdoc = null; try { subdoc = embedding_element.getSVGDocument(); } catch(e) {} return subdoc; } } function ColObj(elem, color) { var elms = document.getElementById(elem); var subdoc = getSubDocument(elms); if (subdoc) subdoc.getElementById("redcircle").setAttribute("stroke", color); } 

Это руководство из трюков CSS – лучшая ссылка, которую я нашел до сих пор.

К сожалению, ваши варианты довольно ограничены использованием CSS для создания SVG, который не является встроенным. Это связано с внедрением стилей внутри SVG-файла или привязкой к таблице стилей из самого SVG.

Оба метода обсуждаются в руководстве по трюкам CSS.

Вот JSFiddle, демонстрирующий связанную технику CSS.

Вот как это работает:

  • Ссылка на таблицу стилей из CSS и добавление classов к отдельным путям:
 < ?xml-stylesheet type="text/css" href="mysvg.css"?>     
  • Создайте файл css, в этом случае mysvg.css:
 .demo-content { fill: #FF0000; } 

Если вы пытаетесь условно настроить SVG, вы, возможно, не выбрали другого, кроме как встроить его.