svg - 折线与路径 : Is there any difference

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

不，没有区别。

不过，您已经在 Canvas 的一半处绘制了一条线。如果您没有为 <svg> 指定高度元素默认为 300 x 150 像素。您的其中一条线在距 Canvas 顶部 150 像素处绘制，因此其宽度的一半被剪掉。

你总是可以让 Canvas 更大。

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