5

我可以只完成我开始它的路径，它会被认为是关闭的还是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) 上是否有两个点？

4

2 回答 2

8

有一点不同。如果路径没有闭合，那么您很可能会在路径两端相交的拐角处看到丢失的像素。这是一个例子：

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

于 2016-09-19T19:45:12.423 回答
-1

在路径末尾添加 Z 命令或在路径末尾添加起点本质上是在做同样的事情。它不会在同一个点上添加额外的点。它只是连接点。

于 2016-09-19T19:38:44.317 回答