具有不同行程宽度的SVG填充规则切口-Java 学习之路

我想生成一个从另一个圆圈切出的圆，就像在http://www.w3.org/TR/SVG/images/painting/fillrule-evenodd.svg的SVG规范中的两个最右边的情况一样 . 但我希望外圆与内圆具有不同的，更粗的笔划宽度 . 我可以't work out how to do this by keeping both circles in the same path definition. If, however, I separate out the two circles into different path tags, the fill-rule subtraction won'工作 . 有没有可能的解决方案？我想要定义两次 .

1 回答

只用一条路就无法做到这一点 .

您需要使用第二个路径，使用笔划但不填充，以添加两个笔划的较粗 .

<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>

回复于 2024-05-03T07:25:00+08:00

具有不同行程宽度的SVG填充规则切口

1 回答

相关问题