并排绘制多条SVG线

Question

availability

我希望这段代码可以让我显示一个红色条和一个宽度相等的蓝色条。但它没有，任何想法为什么？

Answer 1

因为笔划宽度从中心向两个方向（左侧和右侧）进行，而红色矩形的一部分位于画布边框之外。出于同样的原因发生重叠：

  <svg width="250" height="250" style="border: 1px solid red;">
    <line x1="25"  y1="100" x2="25" y2="37" stroke="red" stroke-width="50"></line>
    <line x1="75"  y1="100" x2="75" y2="37" stroke="blue" stroke-width="50"></line>  
  </svg>

http://jsfiddle.net/stdob/7atfz12c/

Answer 2

线条笔划两侧都有。在这种情况下，我认为你必须使用rect而不是行。

<svg width="150" height="250">
<rect width="50" height="100" x="0" y="0" fill="red"/>
<rect width="50" height="100" x="50" y="0" fill="blue" />
</svg>

请参阅this running demo。