0

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

<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>

1
  • Не понял вопроса. Так, цвет меняется в строках .st5{clip-path:url(#SVGID_7_);fill:#00D6D6;} .st6{clip-path:url(#SVGID_4_);fill:none;stroke:#00D6D6;stroke-miterlimit:10;}, где задаете нужный 16-ричный цвет #rrggbb.
    – Kosmos
    16 окт 2018 в 8:31

1 ответ 1

0
.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 выбрать нужный цвет

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.