折线 vs 路径：有什么区别？

Question

折线 vs 路径：有什么区别？

8

我可以使用Polyline和Path绘制相同的图形，但在渲染时却看到了区别。这就是为什么有这个问题的原因 -

<svg xmlns="http://www.w3.org/2000/svg">
<polyline points="200 100, 220 120, 280 120, 300 100" style="stroke:red; stroke-width:2px; fill:none" />
<path d="M200 100 L220 150 H280 L300 100" style="stroke:blue;stroke-width:2px; fill:none" />
</svg>

你看到这两条水平线，虽然它们都是2像素，但其中一条看起来更细。为什么？在这里查看https://jsfiddle.net/xeafLqjp/。

- Jay

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robert Longson · Accepted Answer

不，没有区别。

但是，您的一条线已经超过了画布的一半。如果在<svg>元素中不指定高度，它将默认为300 x 150像素。你的一条线从画布上方150像素处绘制，因此其宽度的一半被裁剪掉了。

您可以始终使画布变大。

<svg height="200px" xmlns="http://www.w3.org/2000/svg">
<polyline points="200 100, 220 120, 280 120, 300 100" style="stroke:red; stroke-width:2px; fill:none" />
<path d="M200 100 L220 150 H280 L300 100" style="stroke:blue;stroke-width:2px; fill:none" />
</svg>