未关闭的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。但是，对于笔划，没有暗示关闭，因此除非您明确添加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屋！