折线与路径：有什么区别

Question

我可以使用折线和路径来绘制相同的东西，但是当渲染时，我看到了区别。这就是为什么问题-

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

您会看到一条水平线，尽管两者均为2px，但其中一条显得较细。为什么？在这里查看https://jsfiddle.net/xeafLqjp/

Answer 1

不，没有区别。

不过，您已经在画布中间画了一条线。如果您没有为<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>