SVG 路径“填充”的颜色超出预期答案

【问题标题】：SVG path 'fill' is coloring more than expectedSVG 路径“填充”的颜色超出预期
【发布时间】：2019-11-23 14:15:25
【问题描述】：

我有一个定义为 SVG 路径的形状，我想用纯色填充它。路径本身看起来是正确的，stroke 遵循我想要的形状。但是，当我将 fill 属性从 none 更改为颜色时，颜色会溢出我定义的曲线并创建一个矩形形状和一个斑点。

在这些示例中，我使用了内联 SVG style 属性，但使用 CSS 样式填充 <path> 得到了相同的结果。

<p>Path with stroke looks correct:</p>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="210" height="297" viewBox="0 0 210 297" version="1.1">
  <path
   style="fill:none;stroke-width:0.3;stroke:#000" 
   d="m47.6 69.5c0 22.9 0 45.9 0 68.8 37 0 74.1 0 111.1 0 0-22.9 0-45.9 0-68.8m-111.1 0c7.5-9.2 17.7-17.8 30-18.8 11.1-0.8 20.6 7.2 26.4 15.9 5.6 9 12.6 18.9 23.6 21.3 11.1 2.1 21-5.6 27.7-13.7 1.3-1.5 2.5-3.1 3.5-4.7"/>
</svg>

<p>But 'fill' covers more than it should:</p>

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="210" height="297" viewBox="0 0 210 297" version="1.1">
  <path 
   style="fill:blue;stroke-width:0.3;stroke:#000"
   d="m47.6 69.5c0 22.9 0 45.9 0 68.8 37 0 74.1 0 111.1 0 0-22.9 0-45.9 0-68.8m-111.1 0c7.5-9.2 17.7-17.8 30-18.8 11.1-0.8 20.6 7.2 26.4 15.9 5.6 9 12.6 18.9 23.6 21.3 11.1 2.1 21-5.6 27.7-13.7 1.3-1.5 2.5-3.1 3.5-4.7"/>
</svg>

如何解决这个问题并让填充颜色跟随形状顶部的曲线？

【问题讨论】：

标签： svg

【解决方案1】：

这是您编写路径的方式。如果您查看d 属性，您的中间有一个m 命令（移动到）。这意味着您没有连续编码路径。我会这样做：

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="210" height="297" viewBox="0 0 210 297" version="1.1">
  <path 
   style="fill:red;stroke-width:0.3;stroke:#000"
   d="M47.6,69.5
      C55.1,60.3,65.3,51.7,77.6,50.7
      C88.7,49.9,98.2,57.9,104,66.6
      C109.6,75.6,116.6,85.5,127.6,87.9
      C138.7,90,148.6,82.3,155.3,74.2
      C156.6,72.7,157.8,71.1,158.8,69.5
      V138.3H47.6z"/>
</svg>

【讨论】：

啊，比我快。我要补充一点，从技术上讲，他有两条单独的路径，因为 M 命令将关闭第一条路径。
谢谢！我没有手动编码路径：我在 Inkscape 中创建了两个单独的路径并使用 path->combine 合并它们。
下次在 Inkscape 或 Illustrator 或其他任何地方绘制时，请尝试不间断地连续绘制。这是正确的唯一方法。