如何在不使用 fillRule EvenOdd 的情况下填充使用路径元素绘制的甜甜圈形状答案

【问题标题】：How to fill a Donut Shape drawn with a Path Element without using fillRule EvenOdd如何在不使用 fillRule EvenOdd 的情况下填充使用路径元素绘制的甜甜圈形状
【发布时间】：2015-01-15 10:19:06
【问题描述】：

大家好，我需要你们的帮助，因为 Google 没有帮助我。

我的目标是了解 svg 路径并在圆圈中画一个圆圈。最终结果应该是一个环，因为我希望第二个圆圈掩盖了第一个圆圈。我发现了一个 svg 正在这样做，一般来说它和我一样，但有更多的步骤。移动到起点，绘制第一个圆，移动到第二个圆的起点，绘制第二个圆并关闭路径。我不知道我做错了什么，我的路径没有被掩盖。

我不能使用填充样式 evenodd，因为我想将 svg 导入 fontello。

你能告诉我我在第二个 svg 中做错了什么，第二个圆圈没有掩盖第一个吗？

工作示例 svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="0.52777803in" height="0.52777803in" viewBox="-2 -2 42 42" id="svg2">
  <path d="m 19,-0.5 
            C
              33.588007,4.3721285 38.5,9.3333333 38.5,19 
              38.5,28.666667 33.588007,33.627872 28.71875,36.0625 
              23.849493,38.4971 19,38.5 19,38.5 
              19,38.5 14.150507,38.4971 9.28125,36.0625 
              4.411993,33.627872 -0.5,28.666667 -0.5,19 
              -0.5,9.3333333 4.411993,4.3721285 9.28125,1.9375 
              14.150507,-0.497128 19,0 19,0 
              19,0 23.650507,0.497128 28.28125,2.8125 
              32.911993,5.1278715 37.5,9.6666667 37.5,19 
              37.5,28.333333 32.911993,32.872128 28.28125,35.1875 
              23.650507,37.502872 19,37.5 19,37.5 
              19,37.5 14.349493,37.5029 9.71875,35.1875 
              5.088007,32.872128 0.5,28.333333 0.5,19 
              0.5,9.6666667 5.088007,5.1278715 9.71875,2.8125 
              14.349493,0.49712848 19,0.5 19,0.5 
            m 0,4 
            C 19,4.5 15.349493,4.49713 11.71875,6.3125 
              8.088007,8.1278715 4.5,11.666667 4.5,19 
              4.5,26.333333 8.088007,29.872128 11.71875,31.6875 
              15.349493,33.5029 19,33.5 19,33.5 
            c 0,0 3.650507,0.0029 7.28125,-1.8125 
            C 29.911993,29.872128 33.5,26.333333 33.5,19 
              33.5,11.666667 29.911993,8.1278715 26.28125,6.3125 
              22.650507,4.49713 19,4 19,4 
              19,4 15.150507,3.50287 11.28125,5.4375 
              7.411993,7.3721285 3.5,11.333333 3.5,19 
              3.5,26.666667 7.411993,30.627872 11.28125,32.5625 
              15.150507,34.497128 19,34.5 19,34.5 
            c 0,0 3.849493,-0.0029 7.71875,-1.9375 
            C 30.588007,30.627872 34.5,26.666667 34.5,19 
              34.5,11.333333 30.588007,7.3721285 26.71875,5.4375 
              22.849493,3.5028715 19,3.5 19,3.5 z" />
</svg>

我自己的 svg 不工作

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px" viewBox="0 0 500 500">
  <path d="m250 0 
            c333 0 333 500 0 500-333 0-333-500 0-500
           m0 10 
            c315 0 315 480 0 480-315 0-315-480 0-480z" />
</svg>

【问题讨论】：

标签： svg path subtraction

【解决方案1】：

如果您不想使用 evenodd，则必须以与第一个相反的方向绘制第二个圆圈。阅读how fill rules work in svg.

<path stroke="blue" d="m250 0 
            c333 0 333 500 0 500-333 0-333-500 0-500
           m0 10 
            c-315 0 -315 480 0 480 
               315 0 315 -480 0 -480" />
</svg>

【讨论】：