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的建议和this 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>