不同笔画宽度的SVG填充规则切割

我想在另一个圆圈中产生一个圆形，就像SVG规范中的两个最右边的情形http://www.w3.org/TR/SVG/images/painting/fillrule-evenodd.svg一样。但是我希望外圈有一个与内圈不同的更粗的笔画宽度。我无法通过将两个圆圈保持在相同的路径定义中来解决这个问题。但是，如果将两个圆圈分隔成不同的路径标记，则填充规则相减将不起作用。有没有可能的解决方案？我不喜欢用较暗的线条覆盖，因为在我的用例中，外部的圆形实际上是一个更复杂的形状，我不想定义两次。不同笔画宽度的SVG填充规则切割

来源

2017-08-11 user2667066

没有办法只用一条路径来做到这一点。

您需要使用第二个路径，但有一个笔画但没有填充，以添加两个笔划中较粗的一个。

<svg width="12cm" height="4cm" viewBox="0 0 1200 400"> 
 
    <rect x="1" y="1" width="1198" height="398" 
 
     fill="none" stroke="blue" /> 
 
    <g fill-rule="evenodd" fill="red" stroke="black" stroke-width="3" > 
 
    <path d="M 950,81 A 107,107 0 0,1 950,295 A 107,107 0 0,1 950,81 z 
 
      M 950,139 A 49,49 0 0,0 950,237 A 49,49 0 0,0 950,139 z" /> 
 
    <path d="M 950,139 A 49,49 0 0,0 950,237 A 49,49 0 0,0 950,139 z" 
 
      fill="none" stroke-width="16"/> 
 
    </g> 
 
</svg>

来源

2017-08-11 11:32:36

感谢。我以前很怕那个。不幸的是，较粗的线是复杂的线，这将增加svg的大小（这是一个图标，所以应该很小）。好吧。 – user2667066

不同笔画宽度的SVG填充规则切割

回答

相关问题