且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-01-12 20:05:19

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