折线与路径：有什么区别

【问题标题】：Polyline vs Path: Is there any difference折线与路径：有什么区别
【发布时间】：2018-08-30 20:09:49
【问题描述】：

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

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

【问题讨论】：

标签： svg polyline

【解决方案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>

【讨论】：

感谢您的澄清。