|
1 |
<img src="https://www.stupidedia.org/images/a/a3/Gangsta-balz-transparent.svg"> |
Когда файл SVG добавлен на страницу HTML с помощью тега <img>, то он ничем не отличается от обычного изображения растрового формата. Поэтому невозможно применить стили из внешней таблицы.
Но есть возможность изменить цвет фигур svg с помощью фильтров CSS или SVG.
Цвет SVG фильтра можно установить любой. В примере ниже изображение будет покрашено в синий цвет
|
1 2 3 4 |
<filter x="0" y="0" width="1" height="1" id="filter_B"> <feFlood flood-color="dodgerblue"/> <feComposite in="SourceGraphic" operator="xor" /> </filter> |
При использовании двух фильтров с разными цветами закраски можно реализовать смену цветов изображения при наведении курсора.
Ниже полный код программы реализующий смену цвета закраски при наведении:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<style> .container { width:100%; height:100%; background:#d3d3d3; overflow:hidden; } .container:hover { background:black; } img { filter:url(#filter_B); } img:hover { filter:url(#filter_G); outline:1px solid red; } </style> <div class="container"> <img src="https://www.stupidedia.org/images/a/a3/Gangsta-balz-transparent.svg"> </div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <filter x="0" y="0" width="1" height="1" id="filter_G"> <feFlood flood-color="yellowgreen"/> <feComposite in="SourceGraphic" operator="xor" /> </filter> <filter x="0" y="0" width="1" height="1" id="filter_B"> <feFlood flood-color="dodgerblue"/> <feComposite in="SourceGraphic" operator="xor" /> </filter> </defs> </svg> |
Обратите внимание, что в шапке SVG кода, – width=”0″ height=”0″
Это сделано для того, чтобы блок SVG не имел размеров и не мешал разметке HTML.
⇚ Как добавить SVG в HTML5 страницу
Следующая ⇛ Масштабирование векторных изображений