SVG问题：使颜色变为白色的透明路径

时间：2019-01-20 03:56:55

标签： svg

在我的项目中，我需要一个SVG图标，但是我不擅长SVG。到目前为止，我得到的SVG图片如下：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="768.000000pt" height="766.000000pt" viewBox="0 0 768.000000 766.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g fill="#b7e68f"  transform="translate(0.000000,766.000000) scale(0.100000,-0.100000)"
 stroke="none">
<path d="M3580 7650 c-14 -4 -48 -8 -76 -9 -53 -1 -200 -20 -344 -45 -324 -57
-682 -173 -977 -318 -473 -231 -843 -512 -1200 -906 -279 -309 -514 -682 -676
-1072 -152 -366 -252 -776 -278 -1138 -5 -81 -14 -166 -19 -190 -12 -52 -13
-289 -2 -296 5 -3 12 -61 15 -128 18 -341 111 -754 249 -1108 122 -311 312
-658 489 -890 187 -245 384 -456 604 -646 53 -46 228 -179 310 -236 271 -189
657 -380 970 -481 410 -132 755 -186 1186 -187 534 0 941 75 1422 264 481 188
888 453 1266 821 204 200 290 301 500 590 57 79 185 301 262 455 44 87 79 161
79 165 0 3 9 25 19 48 57 125 142 377 181 538 47 197 52 220 85 449 30 204 39
650 17 850 -36 331 -86 571 -177 845 -376 1142 -1274 2047 -2412 2432 -270 91
-567 153 -878 185 -128 13 -582 19 -615 8z m422 -1601 c35 -12 81 -34 103 -50
22 -15 367 -355 766 -756 791 -793 765 -763 790 -904 10 -57 10 -77 -5 -134
-23 -93 -49 -139 -112 -202 -72 -72 -145 -105 -250 -111 -94 -5 -169 13 -242
58 -26 16 -208 191 -405 390 -198 198 -361 360 -363 360 -2 0 -5 -606 -6
-1347 l-3 -1348 -32 -67 c-85 -180 -286 -276 -466 -223 -121 35 -239 146 -279
263 -10 29 -14 329 -18 1379 l-5 1342 -366 -363 c-201 -199 -381 -373 -400
-387 -148 -111 -375 -92 -508 42 -90 91 -134 226 -112 345 24 133 5 111 799
907 406 406 757 751 782 767 93 60 225 75 332 39z"/>
</g>
</svg>

enter image description here

当前，箭头是透明的，就我而言，我想使其变为红色，如何修改此svg图像以使其支持？

1 个答案:

答案 0 :(得分：4)

在您的示例中，SVG圆圈和箭头绘制在一个补丁中。

有必要将一个补丁分成两个单独的补丁，分别用于圆圈和箭头。

然后可以将它们绘制为不同的颜色。 

#circle {
fill:#b7e68f;
}
#arrow {
fill:red;
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1" width="768" height="766" viewBox="0 0 768 766" preserveAspectRatio="xMidYMid meet">
  <metadata>
    
Created by potrace 1.15, written by Peter Selinger 2001-2017

  </metadata>
  <g  transform="translate(0.000000,766.000000) scale(0.100000,-0.100000)" stroke="none">
    <path id="arrow" d="m3580 7650c-14-4-48-8-76-9-53-1-200-20-344-45-324-57-682-173-977-318C1710 7047 1340 6766 983 6372 704 6063 469 5690 307 5300 155 4934 55 4524 29 4162 24 4081 15 3996 10 3972-2 3920-3 3683 8 3676c5-3 12-61 15-128 18-341 111-754 249-1108 122-311 312-658 489-890 187-245 384-456 604-646 53-46 228-179 310-236C1946 479 2332 288 2645 187 3055 55 3400 1 3831 0c534 0 941 75 1422 264 481 188 888 453 1266 821 204 200 290 301 500 590 57 79 185 301 262 455 44 87 79 161 79 165 0 3 9 25 19 48 57 125 142 377 181 538 47 197 52 220 85 449 30 204 39 650 17 850-36 331-86 571-177 845-376 1142-1274 2047-2412 2432-270 91-567 153-878 185-128 13-582 19-615 8z"/>
  </g>
  <path id="circle"  d="m358 1c-1.4 0.4-4.8 0.8-7.6 0.9-5.3 0.1-20 2-34.4 4.5-32.4 5.7-68.2 17.3-97.7 31.8C171 61.3 134 89.4 98.3 128.8 70.4 159.7 46.9 197 30.7 236c-15.2 36.6-25.2 77.6-27.8 113.8-0.5 8.1-1.4 16.6-1.9 19-1.2 5.2-1.3 28.9-0.2 29.6 0.5 0.3 1.2 6.1 1.5 12.8 1.8 34.1 11.1 75.4 24.9 110.8 12.2 31.1 31.2 65.8 48.9 89 18.7 24.5 38.4 45.6 60.4 64.6 5.3 4.6 22.8 17.9 31 23.6 27.1 18.9 65.7 38 97 48.1 41 13.2 75.5 18.6 118.6 18.7 53.4 0 94.1-7.5 142.2-26.4 48.1-18.8 88.8-45.3 126.6-82.1 20.4-20 29-30.1 50-59 5.7-7.9 18.5-30.1 26.2-45.5 4.4-8.7 7.9-16.1 7.9-16.5 0-0.3 0.9-2.5 1.9-4.8 5.7-12.5 14.2-37.7 18.1-53.8 4.7-19.7 5.2-22 8.5-44.9 3-20.4 3.9-65 1.7-85-3.6-33.1-8.6-57.1-17.7-84.5C710.9 149.3 621.1 58.8 507.3 20.3 480.3 11.2 450.6 5 419.5 1.8 406.7 0.5 361.3-0.1 358 1Zm42.2 160.1c3.5 1.2 8.1 3.4 10.3 5 2.2 1.5 36.7 35.5 76.6 75.6 79.1 79.3 76.5 76.3 79 90.4 1 5.7 1 7.7-0.5 13.4-2.3 9.3-4.9 13.9-11.2 20.2-7.2 7.2-14.5 10.5-25 11.1-9.4 0.5-16.9-1.3-24.2-5.8-2.6-1.6-20.8-19.1-40.5-39-19.8-19.8-36.1-36-36.3-36-0.2 0-0.5 60.6-0.6 134.7l-0.3 134.8-3.2 6.7c-8.5 18-28.6 27.6-46.6 22.3C365.6 591 353.8 579.9 349.8 568.2c-1-2.9-1.4-32.9-1.8-137.9l-0.5-134.2-36.6 36.3c-20.1 19.9-38.1 37.3-40 38.7-14.8 11.1-37.5 9.2-50.8-4.2-9-9.1-13.4-22.6-11.2-34.5 2.4-13.3 0.5-11.1 79.9-90.7 40.6-40.6 75.7-75.1 78.2-76.7 9.3-6 22.5-7.5 33.2-3.9z" stroke-width="0.1"/>
</svg>

要调整图像的大小并使其具有自适应性：

  • 从width="768"标头中删除height="766"和svg
  • 将svg包装在<div class =" container ">容器中

.container {
width:15%;
height:15%;
}
#circle {
fill:#b7e68f;
}
#arrow {
fill:red;
}
<div class="container">
	<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1"  viewBox="0 0 768 766" preserveAspectRatio="xMidYMid meet">
	  <metadata>
		
	Created by potrace 1.15, written by Peter Selinger 2001-2017

	  </metadata>
	  <g  transform="translate(0.000000,766.000000) scale(0.100000,-0.100000)" stroke="none">
		<path id="arrow" d="m3580 7650c-14-4-48-8-76-9-53-1-200-20-344-45-324-57-682-173-977-318C1710 7047 1340 6766 983 6372 704 6063 469 5690 307 5300 155 4934 55 4524 29 4162 24 4081 15 3996 10 3972-2 3920-3 3683 8 3676c5-3 12-61 15-128 18-341 111-754 249-1108 122-311 312-658 489-890 187-245 384-456 604-646 53-46 228-179 310-236C1946 479 2332 288 2645 187 3055 55 3400 1 3831 0c534 0 941 75 1422 264 481 188 888 453 1266 821 204 200 290 301 500 590 57 79 185 301 262 455 44 87 79 161 79 165 0 3 9 25 19 48 57 125 142 377 181 538 47 197 52 220 85 449 30 204 39 650 17 850-36 331-86 571-177 845-376 1142-1274 2047-2412 2432-270 91-567 153-878 185-128 13-582 19-615 8z"/>
	  </g>
	  <path id="circle"  d="m358 1c-1.4 0.4-4.8 0.8-7.6 0.9-5.3 0.1-20 2-34.4 4.5-32.4 5.7-68.2 17.3-97.7 31.8C171 61.3 134 89.4 98.3 128.8 70.4 159.7 46.9 197 30.7 236c-15.2 36.6-25.2 77.6-27.8 113.8-0.5 8.1-1.4 16.6-1.9 19-1.2 5.2-1.3 28.9-0.2 29.6 0.5 0.3 1.2 6.1 1.5 12.8 1.8 34.1 11.1 75.4 24.9 110.8 12.2 31.1 31.2 65.8 48.9 89 18.7 24.5 38.4 45.6 60.4 64.6 5.3 4.6 22.8 17.9 31 23.6 27.1 18.9 65.7 38 97 48.1 41 13.2 75.5 18.6 118.6 18.7 53.4 0 94.1-7.5 142.2-26.4 48.1-18.8 88.8-45.3 126.6-82.1 20.4-20 29-30.1 50-59 5.7-7.9 18.5-30.1 26.2-45.5 4.4-8.7 7.9-16.1 7.9-16.5 0-0.3 0.9-2.5 1.9-4.8 5.7-12.5 14.2-37.7 18.1-53.8 4.7-19.7 5.2-22 8.5-44.9 3-20.4 3.9-65 1.7-85-3.6-33.1-8.6-57.1-17.7-84.5C710.9 149.3 621.1 58.8 507.3 20.3 480.3 11.2 450.6 5 419.5 1.8 406.7 0.5 361.3-0.1 358 1Zm42.2 160.1c3.5 1.2 8.1 3.4 10.3 5 2.2 1.5 36.7 35.5 76.6 75.6 79.1 79.3 76.5 76.3 79 90.4 1 5.7 1 7.7-0.5 13.4-2.3 9.3-4.9 13.9-11.2 20.2-7.2 7.2-14.5 10.5-25 11.1-9.4 0.5-16.9-1.3-24.2-5.8-2.6-1.6-20.8-19.1-40.5-39-19.8-19.8-36.1-36-36.3-36-0.2 0-0.5 60.6-0.6 134.7l-0.3 134.8-3.2 6.7c-8.5 18-28.6 27.6-46.6 22.3C365.6 591 353.8 579.9 349.8 568.2c-1-2.9-1.4-32.9-1.8-137.9l-0.5-134.2-36.6 36.3c-20.1 19.9-38.1 37.3-40 38.7-14.8 11.1-37.5 9.2-50.8-4.2-9-9.1-13.4-22.6-11.2-34.5 2.4-13.3 0.5-11.1 79.9-90.7 40.6-40.6 75.7-75.1 78.2-76.7 9.3-6 22.5-7.5 33.2-3.9z" />
	</svg>
</div>

相关问题
最新问题