未关闭的 SVG 路径似乎已关闭答案

【问题标题】：Unclosed SVG path appears to be closed未关闭的 SVG 路径似乎已关闭
【发布时间】：2012-04-30 02:04:58
【问题描述】：

我正在用 d3 写一些东西，但遇到了一个奇怪的问题。封闭的路径以“Z”字符结尾，但无论我是否包含 Z，我制作的每条路径都会关闭（并填充）。即使与从规范中复制的示例隔离开来，也会发生这种情况。例如：

<svg>
    <path d="M 40 60 L 10 60 L 40 42.68 M 60 60 L 90 60 L 60 42.68"/>
</svg>

我对问题可能是什么感到困惑。如果有任何见解，我将不胜感激。

【问题讨论】：

【解决方案1】：

来自SVG specification的相关行，关于filling paths：

填充操作通过执行填充操作来填充打开的子路径，就好像在路径中添加了一个附加的“closepath”命令以连接子路径的最后一个点和子路径的第一个点。

所以，就 fill 而言，末尾有一个隐含的“Z”。但是，对于 stroke，没有隐含的闭包，因此除非您明确添加“Z”，否则它不会绘制连接最后一个点和第一个点的笔划。

如果您只想应用笔触，请使用 CSS 禁用填充：

path {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
}

（我看到您回答了自己的问题，但我认为其他人可能仍然会发现有用的解释。）

【讨论】：

【解决方案2】：

我对答案投了赞成票，但有时当您尝试将 svg 转换为画布并希望防止 svg 路径填充或关闭时，css 不是一个选项。等效于 css 解决方案但没有 css...

<svg fill="white" fill-opacity="0" stroke="#000" stroke-width="1.5">
    <path d="M 40 60 L 10 60 L 40 42.68 M 60 60 L 90 60 L 60 42.68"/>
</svg>

【讨论】：