SVG对象和路径的减法操作
我正在尝试创建一种SVG字体，所以需要画一些路径。其中一个字母是通过以下路径定义的：
这个路径是我用svgwrite创建的，具体方法是先画两个圆和一个矩形，然后用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时可以看到正确的结果，但字体编辑器却无法识别生成的路径，结果看起来是这样的：
有没有什么方法可以程序化地生成上面第一张图片的路径呢？
3 个回答
1
过滤器并不会生成路径，它们只是生成位图（所以如果你需要路径，这个答案就不对了）。不过，这里有一个使用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>1
根据@martineau的建议和这个问题，我找到了这样的解决办法：
- 先创建一个由两个半圆组成的圆
- 再创建两个较小的半圆（虽然不是完全的圆形）
然后使用
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字体编辑器只显示成这样：
所以我还得继续调查问题出在哪里。欢迎大家提出更多建议。
2
第一个弧线的绘制角度是负值（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"