svg问题：在两条路径之间用颜色填充空间

Question

我是开发人员，但需要使用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>

目前，它看起来如下：

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

Answer 1

我做了什么：我重新计算了您的svg元素的viewBox，然后计算了您的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。您可以将其设置为所需的任何内容。

Answer 2

您可以通过使用更简单的形状来对其进行大规模简化。以下需要一些调整，但这是一个很好的起点：

<svg width="160" height="160" viewBox="0 0 160 160">
  <circle cx="80" cy="80" r="65" fill="skyblue" stroke="red" stroke-width="15" />
  <path stroke="red" stroke-width="12" fill="none" d="M65 103 v-38 a17 17 0 1 1 34 0 v48" />  
  <path fill="red" d="M83 83 v15 l-18 16-18-16v-15l18 16 18-16" />
</svg>

说明

弯曲的箭头线：

<path stroke="red" stroke-width="12" fill="none" 
    d="M65 103              # Move to 65,103
       v-38                 # Vertical line up 38
       a17 17  0 1 1  34 0  # semicircular arc (see below)
       #17 radius
       #       flags
       #              finish 34 to right (34 = 17*2)
       v48                  # vertical line down 48
    " />  

箭头头：

<path fill="red" 
d="
    M83 83           # Move to top right corner of arrow head
    v15              # down 15
    l -18 16  -18-16 # \/ shape left (bottom of arrow head)
    v-15             # up 15
    l 18 16  18-16   # \/ shape right (arrow top) to starting point
    # line above could be written 'l18 16 z' for same result
" />

请注意，创建marker元素并将其添加到该行的末尾就可以了，而不必像这样绘制箭头...但这是更复杂的解决方案。

Answer 3

仅需扩展enxanetas答案即可正确地确定箭头的方向，这是代码，其中减少了所有变换，并且您的视图/大小保持不变（加上我整理了圆圈）：

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.0" width="160pt" height="157pt" viewBox="0 0 160 157" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
  <circle fill="skyblue" cx="80" cy="78.5" r="58.2"/>
  <path fill="red" stroke="none" d="M 73 41.4 C 68.2 43.1 63.6 47.3 61.7 51.9 C 60.6 54.3 60 60.5 59.6 71.8 L 59.1 88.2 L 53.9 82.4 C 48.9 76.8 48.7 76.6 48.1 79 C 47.7 80.3 47.4 84.1 47.4 87.4 L 47.5 93.4 L 56.2 102.7 L 64.9 112 L 74.6 103.2 L 84.4 94.4 L 84.4 86 L 84.4 77.6 L 82.2 79.5 C 80.9 80.5 78.2 82.9 76.1 84.9 L 72.2 88.4 L 72.6 73.2 C 72.9 58.8 73 57.9 75.3 55.5 C 79.9 50.6 89.6 51.3 93.2 56.7 C 94.7 59 94.9 62.1 94.5 86.1 L 94.2 112.9 L 100.7 112.9 L 107.2 112.9 L 107.9 84.5 C 108.6 56.4 108.6 56 106.4 51.5 C 104 46.4 100.6 43.6 94.3 41.4 C 89.1 39.5 78.2 39.5 73 41.4 Z M 138.2 78.5 C 138.2 46.4 112.1 20.3 80 20.3 C 47.9 20.3 21.8 46.4 21.8 78.5 C 21.8 110.6 47.9 136.7 80 136.7 C 112.1 136.7 138.2 110.6 138.2 78.5 Z M 155.5 78.5 C 155.5 120.2 121.7 154 80 154 C 38.3 154 4.5 120.2 4.5 78.5 C 4.5 36.8 38.3 3 80 3 C 121.7 3 155.5 36.8 155.5 78.5 Z" />
</svg>