时间戳

首页 > 解决方案 > svg 问题：用颜色填充两条路径之间的空间

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="160.000000pt" height="157.000000pt" viewBox="0 0 160.000000 157.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,157.000000) scale(0.100000,-0.100000)"
fill="red" stroke="none">
<path d="M715 1534 c-191 -31 -370 -134 -489 -280 -55 -67 -118 -192 -143
-284 -27 -101 -25 -293 5 -390 43 -136 97 -226 197 -326 80 -80 104 -98 195
-142 135 -66 235 -87 375 -79 510 28 846 542 664 1018 -87 228 -278 400 -514
463 -61 17 -236 28 -290 20z m285 -191 c176 -58 318 -202 372 -378 31 -97 31
-243 0 -340 -75 -243 -304 -415 -552 -415 -258 0 -486 168 -562 415 -31 97
-31 243 0 340 38 124 120 235 230 309 152 104 333 128 512 69z"/>
<path d="M746 1155 c-48 -17 -94 -59 -113 -105 -11 -24 -17 -86 -21 -199 l-5
-164 -52 58 c-50 56 -52 58 -58 34 -4 -13 -7 -51 -7 -84 l1 -60 87 -93 87 -93
97 88 98 88 0 84 0 84 -22 -19 c-13 -10 -40 -34 -61 -54 l-39 -35 4 152 c3
144 4 153 27 177 46 49 143 42 179 -12 15 -23 17 -54 13 -294 l-3 -268 65 0
65 0 7 284 c7 281 7 285 -15 330 -24 51 -58 79 -121 101 -52 19 -161 19 -213
0z"/>
</g>
</svg>

目前，它如下所示：

在此处输入图像描述

这是一个掉头标志。并且有两条路径：外圈和内圈。目前，外部路径和内部路径之间的空间是透明的。我想把它变成蓝色。如何解决？

标签： svg

解决方案

我所做的：我重新计算了viewBox你的 svg 元素，然后我计算了你的 svg 的中心。我添加了一个蓝色圆圈，中心位于 svg 元素的中心。为了获得您的 svg 的大小，我首先删除了转换并使用了该getBBox()方法。我已将边界框的属性用于新viewBox值

svg{width:90vh;}
<svg viewBox="64 32 1506 1506">
  <circle cx="817" cy="785" r="680" fill="skyblue" />
<g 
fill="red" stroke="none">
<path d="M715 1534 c-191 -31 -370 -134 -489 -280 -55 -67 -118 -192 -143
-284 -27 -101 -25 -293 5 -390 43 -136 97 -226 197 -326 80 -80 104 -98 195
-142 135 -66 235 -87 375 -79 510 28 846 542 664 1018 -87 228 -278 400 -514
463 -61 17 -236 28 -290 20z m285 -191 c176 -58 318 -202 372 -378 31 -97 31
-243 0 -340 -75 -243 -304 -415 -552 -415 -258 0 -486 168 -562 415 -31 97
-31 243 0 340 38 124 120 235 230 309 152 104 333 128 512 69z"/>
<path d="M746 1155 c-48 -17 -94 -59 -113 -105 -11 -24 -17 -86 -21 -199 l-5
-164 -52 58 c-50 56 -52 58 -58 34 -4 -13 -7 -51 -7 -84 l1 -60 87 -93 87 -93
97 88 98 88 0 84 0 84 -22 -19 c-13 -10 -40 -34 -61 -54 l-39 -35 4 152 c3
144 4 153 27 177 46 49 143 42 179 -12 15 -23 17 -54 13 -294 l-3 -268 65 0
65 0 7 284 c7 281 7 285 -15 330 -24 51 -58 79 -121 101 -52 19 -161 19 -213
0z"/>
</g> 
</svg>

观察：在我的代码中，svg 元素的宽度为 90vh。您可以将其设置为您需要的任何内容。

推荐阅读