直线的第一个坐标 (x0,y0) 不影响 SVG 中的起始位置

Question

我正在我的 SVG 组件中画一条线，如 this blog 所示。

svg.append("line")
  .attr({ x0: 300, y0: 100, x1: 340, y1: 200 })
  .attr({ "stroke": "blue", "stroke-width": "1" });

线出现了，但只有第二个坐标（x1，y1）影响它的外观。第一个 (x0,y0) 似乎没有效果，该行从原点开始。

我尝试添加更多行，希望第二行至少从前一行的末尾开始，但事实并非如此。（我不是在寻找折线 - 我只是想解决问题。）我试图切换回每个方法一个属性的语法。也没有运气。

Answer 1

在 SVG 中，行从 x1、y1 到 x2、y2，没有 x0、y0 这样的东西

svg = d3.selectAll("svg");

svg.append("line")
  .attr({ x1: 300, y1: 100, x2: 340, y2: 200 })
  .attr({ "stroke": "blue", "stroke-width": "1" });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="100%" height="100%"></svg>

Answer 2

正如你所说

The first one (x0,y0) seems to have no effect and the line starts at origin.

由于您的 SVG 线条属性声明而无效

 <line x1="100" y1="100" x2="340" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/>

所以行开始于 x1 & y1 而不是 x0 & y0 并以 x2, y2

结尾

希望这就是您要找的。

First coordinate of a line (x0,y0) doesn't affect starting position in SVG