Как изменить цвет SVG картинки в CSS

14.08.2018 04:43:41

Коротко о том, как вставить на страницу SVG изображение и изменить его цвет через CSS.

Основная идея в том, что в файле svg доложен быть элемент с определенным ID, пример #my1

1.html (Download)

 <!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

	<style type="text/css">
	#my1{
	        fill: green;
	}
	</style>

	    
	<svg>
	    <use xlink:href="01.svg#my1"></use>
	</svg>

</body>
</html>

01.svg (Download)

 <?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g id="my1">
	<g>
		<path d="M497,123.271h-71.437V86.477c0-32.204-26.053-58.404-58.076-58.404H144.513c-32.023,0-58.076,26.2-58.076,58.404v36.796
			H15c-8.284,0-15,6.716-15,15v61.563c0,8.284,6.716,15,15,15h17.735l6.456,191.327c0.707,20.955,9.343,40.525,24.315,55.108
			c15.002,14.61,34.763,22.657,55.642,22.657h273.705c43.389,0,78.51-34.655,79.957-78.882l6.418-190.211H497
			c8.284,0,15-6.716,15-15v-61.563C512,129.987,505.284,123.271,497,123.271z M116.437,86.477c0-15.662,12.595-28.404,28.076-28.404
			h222.975c15.481,0,28.076,12.742,28.076,28.404v36.796H116.437V86.477z M442.826,404.049
			c-0.915,27.969-22.866,49.878-49.974,49.878H119.147c-27.1,0-49.051-21.426-49.975-48.777L62.75,214.835h116.62
			c6.703,27.336,31.277,47.672,60.496,47.672h32.27c20.928,0,51.317-20.315,59.939-47.672h117.137L442.826,404.049z
			 M211.174,214.835h87.723c-7.459,10.246-20.505,17.672-26.762,17.672h-32.27C227.394,232.507,216.559,225.322,211.174,214.835z
			 M482,184.835H30v-31.563h452V184.835z"/>
	</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>


Категории: HTML, CSS
Яндекс.Метрика