Как изменить цвет svg иконки?

223
20 февраля 2019, 01:20

Что-то непонятное происходит с иконкой. Получается, что она состоит из элементов которые либо заливаются, либо обводятся.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Слой_1" x="0px" y="0px" viewBox="0 0 21.1 20.1" style="enable-background:new 0 0 21.1 20.1;" xml:space="preserve" width="240" height="240"> 
<style type="text/css"> 
	.st0{clip-path:url(#SVGID_2_);} 
	.st1{filter:url(#Adobe_OpacityMaskFilter);} 
	.st2{enable-background:new    ;} 
	.st3{clip-path:url(#SVGID_4_);} 
	.st4{clip-path:url(#SVGID_4_);mask:url(#SVGID_5_);} 
	.st5{clip-path:url(#SVGID_7_);fill:#00D6D6;} 
	.st6{clip-path:url(#SVGID_4_);fill:none;stroke:#00D6D6;stroke-miterlimit:10;} 
</style> 
<g> 
	<defs> 
		<rect id="SVGID_1_" width="21.1" height="20.1"/> 
	</defs> 
	<clipPath id="SVGID_2_"> 
		<use xlink:href="#SVGID_1_" style="overflow:visible;"/> 
	</clipPath> 
	<g class="st0"> 
		<defs> 
			<rect id="SVGID_3_" y="0" width="21.1" height="20.1"/> 
		</defs> 
		<clipPath id="SVGID_4_"> 
			<use xlink:href="#SVGID_3_" style="overflow:visible;"/> 
		</clipPath> 
		<defs> 
			<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="0" y="2.7" width="18.5" height="17.4"> 
				<feFlood style="flood-color:white;flood-opacity:1" result="back"/> 
				<feBlend in="SourceGraphic" in2="back" mode="normal"/> 
			</filter> 
		</defs> 
		<mask maskUnits="userSpaceOnUse" x="0" y="2.7" width="18.5" height="17.4" id="SVGID_5_"> 
			<g class="st1"> 
				<g class="st2"> 
					<rect x="11" y="-1.4" class="st3" width="11.7" height="11.7"/> 
				</g> 
			</g> 
		</mask> 
		<g class="st4"> 
			<g> 
				<defs> 
					<rect id="SVGID_6_" y="2.7" width="18.5" height="17.4"/> 
				</defs> 
				<clipPath id="SVGID_7_"> 
					<use xlink:href="#SVGID_6_" style="overflow:visible;"/> 
				</clipPath> 
				<path class="st5" d="M12.7,20.1c-1.2,0-1.7-1.6-2.1-3.1c-0.3-1.1-0.7-2.6-1.3-2.6H9.2c-0.6,0-1,1.5-1.3,2.6      c-0.4,1.5-0.9,3.1-2.1,3.1c-2.1,0-3.8-3.7-4-4.2c-0.1-0.2-2.6-5.3-1.5-10C1.4,1.7,6.2,2.6,8.3,3c0.4,0.1,0.8,0.1,1,0.1h0.1      c0.2,0,0.5-0.1,1-0.1c2.1-0.4,6.9-1.3,7.9,2.9c1.2,4.6-1.4,9.8-1.5,10C16.5,16.3,14.8,20.1,12.7,20.1 M9.2,13.3L9.2,13.3      c1.5,0,2,1.7,2.4,3.4c0.2,0.9,0.6,2.3,1,2.3c1,0,2.3-2,3-3.5c0-0.1,2.5-5,1.4-9.2c-0.7-2.9-3.8-2.6-6.6-2.1      C9.9,4.2,9.5,4.3,9.3,4.3H9.2C8.9,4.3,8.6,4.2,8,4.1C5.2,3.6,2.1,3.3,1.4,6.2c-1.1,4.2,1.4,9.1,1.4,9.2c0.7,1.5,2,3.5,3,3.5      c0.4,0,0.8-1.4,1-2.3C7.3,15,7.8,13.3,9.2,13.3"/> 
			</g> 
		</g> 
		<polygon class="st6" points="20.6,3 18.1,3 18.1,0.5 16,0.5 16,3 13.5,3 13.5,5.2 16,5.2 16,7.7 18.1,7.7 18.1,5.2 20.6,5.2   "/> 
	</g> 
</g> 
</svg>

Answer 1
.st5{clip-path:url(#SVGID_7_);fill:#000;}
.st6{clip-path:url(#SVGID_4_);fill:none;stroke:#000;stroke-miterlimit:10;}

В этих двух строка #000 это черный я заменил ваш #00D6D6 можешь полностью вместе с # заменить на black или white какой нужен или же использую что то по типу https://www.w3schools.com/colors/colors_picker.asp выбрать нужный цвет

READ ALSO
JQuery - непонятное бездействие

JQuery - непонятное бездействие

Недавно долго возился с ajax, задавал тут вопрос, и не без помощи изучал, как он работаетРешил разработать мини-чат, но что-то пошло не так: внешний...

157
Выполнить функцию при нажатие на кнопку

Выполнить функцию при нажатие на кнопку

Есть скрипт который проверяет в блоке наличие других похожих блоков и если добавлять дубликат, он выведет confirm окноХочу использовать своё...

146
Вывод в текстбокс сообщений в реальном времени в wpf

Вывод в текстбокс сообщений в реальном времени в wpf

Что лучше использовать при данной задачеМне нужно на форме WPF в паттерне MVVM выводить сообщения о работе программы, 00:00:00 Выполнена функция...

165
Привязка данных нескольких таблиц бд к DataGrid wpf с использованием Entity Framework

Привязка данных нескольких таблиц бд к DataGrid wpf с использованием Entity Framework

Ситуация следующая: имеется 3 таблицы БД, данные которых, предварительно соединив их в запросе с помощью оператора join, должны выводиться в DataGridПолучилось...

166