我正在尝试创建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时可以看到正确的结果,但是字体编辑器无法识别创建的路径,如下所示:


是否可以通过编程方式生成上述第一张图片的路径?

似乎您可以在SVG中将其作为由三个单独的子路径组成的显式复合路径-外部圆加上上下左右半圆(通过椭圆弧曲线)以及适当的填充规则来完成。 这样,您的字体编辑器便可以处理此问题,因为它不必通过形状差异来计算任何路径本身。

@martineau,那就是我的问题。 如何创建<>? 我的尝试(请参阅d和fill-rule =" evenodd")在我的描述中,但我不知道如何改进它们。

我没有建议相同的3个子路径。 第一个是外部完整的圆(如您所愿),但是其他两个将是闭合的椭圆弧曲线(上部和下部局部圆)。 不幸的是,我无法在评论中添加图片。

这是一张显示我认为您需要的子路径的图像。

第一个圆弧具有负(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"

过滤器不产生路径,它们仅产生位图(因此,如果您需要路径,这是错误的答案)。但是,这是一个使用SVG过滤器的版本-因为您已用问题标记了该标签(在Firefox中不起作用-尚不能将对象用作feImage输入-您必须将它们内联为数据URI)。

"black" r="80"/>"

在@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字体编辑器仅呈现以下内容:


因此,我将不得不继续调查问题可能来自何处。欢迎进一步的建议。