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

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

本文关键字：SVG 影响 位置 y0 坐标 第一个 x0      更新时间：2023-09-26

我正在我的SVG组件中画一条线，如本博客所示。

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

将显示该线，但只有第二个坐标 （x1，y1） 会影响其外观。第一个 （x0，y0） 似乎没有效果，线从原点开始。

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

正如你所说

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

由于 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 结尾

希望这就是你要找的。

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

相关文章：