对象和路径的 SVG 减法答案

【问题标题】：SVG subtraction of objects and paths对象和路径的 SVG 减法
【发布时间】：2014-10-25 19:33:26
【问题描述】：

我正在尝试创建 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 个子路径。第一个是外部的，一个完整的圆（就像你一样），但另外两个都是封闭的椭圆弧曲线（上部和下部的部分圆）。很遗憾，我的评论中无法包含图片。
这是一个image，显示了我认为您需要的子路径。

标签： python svg svg-filters svg-font

【解决方案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"

【讨论】：

【解决方案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 字体编辑器只呈现：

所以我将不得不继续调查问题可能来自哪里。欢迎提出更多建议。

【讨论】：

【解决方案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>

【讨论】：