我可以在不使用 z 参数的情况下关闭 SVG 路径吗?
can I close an SVG path without using a z parameter?
我可以只完成我开始它的路径,它会被视为关闭,还是必须使用 Z
命令?
例如,是这个
path d="M150 0 L75 200 L225 200 L150 0" stroke="black" fill="none"
同此
path d="M150 0 L75 200 L225 200 Z" stroke="black" fill="none"
或者在第一个和第二个例子中是否有两个点在同一个点 (150, 0)?
在路径末尾添加 Z 命令或在路径末尾添加起点本质上是相同的 thing.And 它不会在同一路径上添加额外的点 spot.It 只是加入积分。
存在轻微的差异。如果一条路径没有闭合,那么您很可能会在路径两端相交的拐角处看到丢失的像素。这是一个例子:
<svg width="360" height="100" viewBox="0 0 360 100">
<g stroke-width="20" fill="none">
<path d="m10 10h80v80h-80v-80" stroke="#f00" stroke-linecap="butt" />
<path d="m130 10h80v80h-80v-80" stroke="#0a0" stroke-linecap="square" />
<path d="m250 10h80v80h-80z" stroke="#04f" />
</g>
</svg>
左边的路径是开放的,由于左上角的两个顶点没有连接,所以你可以看到两个线帽重叠的空隙。这可以通过在 svg 标记中添加 stroke-linecap="square"
来解决,但在大多数情况下,使用封闭路径会更有意义,如右图所示。
编辑:
对于不需要在路径的起点和终点之间有直线段的曲线形状,只需将起点和终点放在同一位置即可。如果你的切线在同一方向对齐,那么如果你离开路径打开可能并不重要,除非你将 stroke-linecap
设置为 butt
,在这种情况下,末端部分将易于稍微偏离路径。例如:
<svg width="160" height="160" viewBox="-80 -80 160 160">
<path d="M0 70C20 70 0 40 20 20 40 0 70 20 70 0 70-20 40 0 20-20 0-40 20-70 0-70-20-70 0-40-20-20-40 0-70-20-70 0-70 20-40 0-20 20 0 40-20 70 0 70" fill="#fcc" stroke="#f00" stroke-width="20" stroke-linecap="square"/>
</svg>
<svg width="160" height="160" viewBox="-80 -80 160 160">
<path d="M0 70C20 70 0 40 20 20 40 0 70 20 70 0 70-20 40 0 20-20 0-40 20-70 0-70-20-70 0-40-20-20-40 0-70-20-70 0-70 20-40 0-20 20 0 40-20 70 0 70z" fill="#afa" stroke="#0a0" stroke-width="20" stroke-linecap="square"/>
</svg>
如果仔细观察,您会发现红色形状底部的线帽相互之间有一些轻微的块状。绿色的形状是闭合曲线,所以不用担心线帽。
■ 附录:
几天后才回到这个页面,看起来 Chrome 已同时更新(目前在 [=64] 上使用 Chrome 版本 53.0.2785.116/64 位=] X)。现在看来,如果起点和终点在很小的误差范围内重合,开放路径会自动关闭。
这又是第一个图形,但有三个开放路径,其中起点和终点分别相隔 0.1px、0.001px 和 0.00001px(从左到右):
<svg width="360" height="100" viewBox="0 0 360 100">
<g stroke-width="20" fill="none">
<path d="m10 10h80v80h-80v-79.99" stroke="#f00" stroke-linecap="butt" />
<path d="m130 10h80v80h-80v-79.9999" stroke="#0a0" stroke-linecap="butt" />
<path d="m250 10h80v80h-80v-79.999999" stroke="#04f" stroke-linecap="butt" />
</g>
</svg>
我不确定我是否同意这种行为。它很容易导致动画路径出现故障:
<svg width="120" height="120" viewBox="0 0 120 120">
<path id="p" d="M10 10 110 10 110 110 10 110 10 10" stroke="#f00" fill="none" stroke-width="20" />
<animate xlink:href="#p" attributeName="d" attributeType="XML" from="M9.99999 9.99999 110 10 110 110 10 110 10 10" to="M10.00001 10.00001 110 10 110 110 10 110 10 10" dur="1s" fill="freeze" repeatCount="indefinite" />
</svg>
我可以只完成我开始它的路径,它会被视为关闭,还是必须使用 Z
命令?
例如,是这个
path d="M150 0 L75 200 L225 200 L150 0" stroke="black" fill="none"
同此
path d="M150 0 L75 200 L225 200 Z" stroke="black" fill="none"
或者在第一个和第二个例子中是否有两个点在同一个点 (150, 0)?
在路径末尾添加 Z 命令或在路径末尾添加起点本质上是相同的 thing.And 它不会在同一路径上添加额外的点 spot.It 只是加入积分。
存在轻微的差异。如果一条路径没有闭合,那么您很可能会在路径两端相交的拐角处看到丢失的像素。这是一个例子:
<svg width="360" height="100" viewBox="0 0 360 100">
<g stroke-width="20" fill="none">
<path d="m10 10h80v80h-80v-80" stroke="#f00" stroke-linecap="butt" />
<path d="m130 10h80v80h-80v-80" stroke="#0a0" stroke-linecap="square" />
<path d="m250 10h80v80h-80z" stroke="#04f" />
</g>
</svg>
左边的路径是开放的,由于左上角的两个顶点没有连接,所以你可以看到两个线帽重叠的空隙。这可以通过在 svg 标记中添加 stroke-linecap="square"
来解决,但在大多数情况下,使用封闭路径会更有意义,如右图所示。
编辑:
对于不需要在路径的起点和终点之间有直线段的曲线形状,只需将起点和终点放在同一位置即可。如果你的切线在同一方向对齐,那么如果你离开路径打开可能并不重要,除非你将 stroke-linecap
设置为 butt
,在这种情况下,末端部分将易于稍微偏离路径。例如:
<svg width="160" height="160" viewBox="-80 -80 160 160">
<path d="M0 70C20 70 0 40 20 20 40 0 70 20 70 0 70-20 40 0 20-20 0-40 20-70 0-70-20-70 0-40-20-20-40 0-70-20-70 0-70 20-40 0-20 20 0 40-20 70 0 70" fill="#fcc" stroke="#f00" stroke-width="20" stroke-linecap="square"/>
</svg>
<svg width="160" height="160" viewBox="-80 -80 160 160">
<path d="M0 70C20 70 0 40 20 20 40 0 70 20 70 0 70-20 40 0 20-20 0-40 20-70 0-70-20-70 0-40-20-20-40 0-70-20-70 0-70 20-40 0-20 20 0 40-20 70 0 70z" fill="#afa" stroke="#0a0" stroke-width="20" stroke-linecap="square"/>
</svg>
如果仔细观察,您会发现红色形状底部的线帽相互之间有一些轻微的块状。绿色的形状是闭合曲线,所以不用担心线帽。
■ 附录:
几天后才回到这个页面,看起来 Chrome 已同时更新(目前在 [=64] 上使用 Chrome 版本 53.0.2785.116/64 位=] X)。现在看来,如果起点和终点在很小的误差范围内重合,开放路径会自动关闭。
这又是第一个图形,但有三个开放路径,其中起点和终点分别相隔 0.1px、0.001px 和 0.00001px(从左到右):
<svg width="360" height="100" viewBox="0 0 360 100">
<g stroke-width="20" fill="none">
<path d="m10 10h80v80h-80v-79.99" stroke="#f00" stroke-linecap="butt" />
<path d="m130 10h80v80h-80v-79.9999" stroke="#0a0" stroke-linecap="butt" />
<path d="m250 10h80v80h-80v-79.999999" stroke="#04f" stroke-linecap="butt" />
</g>
</svg>
我不确定我是否同意这种行为。它很容易导致动画路径出现故障:
<svg width="120" height="120" viewBox="0 0 120 120">
<path id="p" d="M10 10 110 10 110 110 10 110 10 10" stroke="#f00" fill="none" stroke-width="20" />
<animate xlink:href="#p" attributeName="d" attributeType="XML" from="M9.99999 9.99999 110 10 110 110 10 110 10 10" to="M10.00001 10.00001 110 10 110 110 10 110 10 10" dur="1s" fill="freeze" repeatCount="indefinite" />
</svg>