我可以在不使用az参数的情况下关闭SVG路径吗？

Question

我可以完成一个我启动它的路径,它将被视为关闭或是否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)有两个点？

Answer 1

有一点点差异.如果路径未关闭,则您可能会看到路径两端相交的角落处缺少像素.这是一个例子:

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

左侧的路径是打开的,由于左上角的两个顶点未连接,您可以看到两个线帽重叠的间隙.这可以通过添加stroke-linecap="square"到svg标记来修复,但在大多数情况下,使用封闭路径更有意义,如右图所示.

编辑:

对于您不希望在路径的起点和终点之间使用直线段的曲线形状,只需将起点和终点放在同一位置即可.如果您的切线在同一方向上对齐,那么如果您将路径保持打开状态可能无关紧要,除非您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在此期间已经更新(目前在OS X上使用Chrome版本53.0.2785.116/64位).现在看来,如果起点和终点在一小部分误差范围内重合,则开路径会自动关闭.

这是第一个图形,但有三个开放路径,其中起点和终点分别分别为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>