javascript 未关闭的 SVG 路径似乎已关闭
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10213155/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unclosed SVG path appears to be closed
提问by ballaw
I am writing some stuff with d3 and I came across a a bizarre problem. Paths that are closed end with a 'Z' character, but every path I make closes ( and fills ) regardless of whether I include a Z or not. Even in isolation with examples copied from the spec this happens. For example:
我正在用 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>
I am baffled as to what the problem could be. I would appreciate any insight.
我对问题可能是什么感到困惑。我将不胜感激任何见解。
回答by mbostock
The relevant line from the SVG specification, regarding filling paths:
The fill operation fills open subpaths by performing the fill operation as if an additional "closepath" command were added to the path to connect the last point of the subpath with the first point of the subpath.
填充操作通过执行填充操作来填充打开的子路径，就像在路径中添加了一个附加的“closepath”命令以将子路径的最后一个点与子路径的第一个点连接起来。
So, as far as the fillis concerned, there's an implicit "Z" at the end. However, for the stroke, there's no implied closure, so it won't draw a stroke connecting the last point to the first point unless you explicitly add a "Z".
因此，就填充而言，末尾有一个隐含的“Z”。但是，对于stroke，没有隐含的闭合，因此除非您明确添加“Z”，否则它不会绘制将最后一个点连接到第一个点的笔划。
If you only want to apply a stroke, use CSS to disable the fill:
如果您只想应用笔触，请使用 CSS 禁用填充：
path {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
(I see you answered your own question, but I thought others might still find an explanation useful.)
（我看到你回答了你自己的问题，但我认为其他人可能仍然觉得解释有用。）
回答by SYK
I up-voted the answer, but sometimes css is not an option when you try to convert the svg to canvas and would like to prevent the svg path from filling or closing. Equivalent to the css solution but with no css...
我对答案投了赞成票，但有时当您尝试将 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>
