python - 对象和路径的 SVG 减法

Question

我正在尝试创建 SVG 字体，所以我需要创建一些路径。其中一个字母由以下路径定义：

我用svgwrite创建的，通过创建两个circles和一个rect，然后使用 inkscape 来获取两个圆的差异以及与直线的交点，如下所示：

我的问题是我是否可以直接使用 SVG 或 svgwrite 做到这一点？要么进行布尔运算，要么创建一个与上述行为相同的路径。

我试图用如下路径创建一个黑白圆圈：

 d="M0,128 A128,128,1,1,0 0 127.9 Z\
  M 32 128 A 96 96 1 1 0 32 127.9 Z"

但是，fill="#000000", stroke = "none", fill-rule="evenodd" SVG 字体编辑器无法识别此环（它只会创建一个黑色光盘）。

我还尝试创建路径组合（外圆、内圆、水平线）

d="M0,128 A128,128,1,1,0 0 127.9 Z\
 M 32 128 A 96 96 1 1 0 32 127.9 Z \
M 38 128 l 0 15 l 180 0 l 0 -30 l -180 0 z"

但是虽然我在打开 SVG 时可以看到正确的结果，但字体编辑器将无法识别创建的路径，如下所示：

有没有办法以编程方式生成上面第一张图片的路径？

Answer 1

第一个弧的绘制角度为负 (0)，第二个弧的绘制角度必须为正 (1)，并从相对侧绘制以达到预期效果。

#--------------------------N-----------↓↓↓-↓↓↓-------------P-↓↓↓-↓↓↓↓↓----------------------------------------------
d="M 0 128 A 128 128 1 1 0 0 127.9 Z M 224 128 A 96 96 1 1 1 224 127.9 Z M 38 128 L 0 15 L 180 0 L 0 -30 L -180 0 Z"

Answer 2

按照@martineau的建议和这个SO问题，我找到了这个解决方案：

• 创建一个由两半组成的圆圈
• 创建两个较小的半圆（不是很圆）

• 然后使用 fill-rule: evenodd 来组合所有这些。

  d="
  M 128, 128                 
  m -128, 0                    
  a 128,128 0 1,0 256,0\    
  a 128,128 0 1,0 -256,0\
  M 32,112 a 1.15 1 0 1 1 194, 0z\
  M 32,142 a 1.15 1 0 1 0 194, 0z\
  "
  

它返回如下内容： . 不幸的是，Inkscape SVG 字体编辑器只呈现：

所以我将不得不继续调查问题可能来自哪里。欢迎进一步的建议。

Answer 3

过滤器不产生路径，它们只产生位图（所以如果你需要一个路径——这是错误的答案）。但这是一个使用 SVG 过滤器的版本——因为你用它标记了问题（在 Firefox 中不起作用——还不能将对象用作 feImage 输入——你必须将它们作为数据 URI 内联）。

<svg width="200px" height="200px">
  <defs>
    <circle id="inner" cx="80" cy="80" r="60" fill="white" />
    <line id="crossbar" x1="20" x2="140" y1="80" y2="80" stroke-width="22" stroke="black"/>
    
    <filter id="combine" x="0%" y="0%">
      <feImage xlink:href="#inner" result="innerwhite"/>
      <feImage xlink:href="#crossbar" result="crossbarthing"/>
      <feComposite operator="xor" in="SourceGraphic" in2="innerwhite"/>
      <feComposite operator="over" in2="crossbarthing"/>
    </filter>
  </defs>
  <circle filter="url(#combine)" cx="100" cy="100" fill=
"black" r="80"/>"
</svg>