未关闭的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>

我感到困惑的是问题是什么。我很感激任何见解。

Answer 1

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

  

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

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

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

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

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

Answer 2

我对答案进行了投票，但是当你尝试将svg转换为canvas并希望阻止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>