未关闭的 SVG 路径似乎已关闭 [英] Unclosed SVG path appears to be closed

问题描述

我正在用 d3 写一些东西，我遇到了一个奇怪的问题.封闭的路径以 'Z' 字符结尾，但无论我是否包含 Z，我制作的每条路径都会关闭(并填充).即使单独使用从规范中复制的示例，也会发生这种情况.例如:

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:

<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.

推荐答案

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

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

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.

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

So, as far as the fill is 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".

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

If you only want to apply a stroke, use CSS to disable the fill:

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.)

这篇关于未关闭的 SVG 路径似乎已关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！