javascript - 未关闭的 SVG 路径似乎已关闭

Question

我正在用 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>

我很困惑可能是什么问题。我将不胜感激。

score 64 · Accepted Answer

SVG 规范中关于填充路径的相关行：

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

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

如果您只想应用描边，请使用 CSS 禁用填充：

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

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

score 10 · Accepted Answer

我对答案投了赞成票，但有时当您尝试将 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>

2 回答 2