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

正如你所说

第一个（x0，y0）似乎没有效果，并且该行从原点开始。

由于您的SVG行属性声明

，

无效

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

因此，行以 x1 ＆amp; y1 不是 x0 ＆amp; y0 以 x2，y2

结尾

希望这就是你要找的东西。

Answer 2

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

线的第一个坐标（x0，y0）不会影响SVG中的起始位置

2 个答案: