折线与路径:有什么区别

时间:2018-03-21 15:49:42

标签: svg polyline

我可以使用Polyline和Path绘制相同的东西,但是当它被渲染时,我看到了差异。这就是问题的原因 -

call apoc.periodic.commit("
match (loc:Location)
WHERE NOT (loc)-[:OwnsDevice]->(:dev)
WITH loc LIMIT {limit}
MATCH (dev:Device)
WHERE dev.OwnedByLocation contains loc.Name1
OR dev.OwnedByLocation contains loc.Name2 
OR dev.OwnedByLocation contains loc.Name3 
OR dev.OwnedByLocation contains loc.Name4 
OR dev.OwnedByLocation contains loc.Name5 
OR dev.OwnedByLocation contains loc.Name6 
OR dev.OwnedByLocation contains loc.Name7 
OR dev.OwnedByLocation contains loc.Name8 
OR dev.OwnedByLocation contains loc.Name9 
OR dev.OwnedByLocation contains loc.Name10 
OR dev.OwnedByLocation contains loc.Name11 
OR dev.OwnedByLocation contains loc.Name12 
OR dev.OwnedByLocation contains loc.Name13 
OR dev.OwnedByLocation contains loc.Name14
CREATE (loc)-[r:OwnsDevice {Source:'Legacy Database'}]->(dev)
RETURN count(*)
",{limit:10000})

你看到水平线,虽然两者都是2px但是一个看起来更薄。为什么?在此处查看https://jsfiddle.net/xeafLqjp/

1 个答案:

答案 0 :(得分:7)

不,没有区别。

你已经从画布的一半画了一条线。如果您没有为<svg>元素指定高度,则默认为300 x 150像素。你的一条线从画布顶部以150像素绘制,因此其宽度的一半被剪掉。

你总是可以让画布更大。

&#13;
&#13;
<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>
&#13;
&#13;
&#13;