y=mx+c 格式的 SVG 行

Question

我想画一个 SVG线鉴于 斜率和常数项 或 y = mx + c格式。
有没有直接的方法可以在 SVG 或间接的方式中做到这一点？
提前致谢。

Answer 1

<line>标签仅支持开始和结束属性( x1 、 y1 、 x2 、 y2 )。因此，您需要手动选择 Canvas 外的 x 坐标并使用 y2 = y1 + m( x2 - x1 )。

编辑

查看规范，可以根据需要转换单个元素:

<line ... transform="translate(x, y) rotate(theta)" />

哪里 theta是以度为单位的顺时针旋转角度。

所以你可以画一条从 (-10000, 0) 到 (10000, 0) 的长水平线，然后应用适当的旋转和平移来定位它:

<line x1="-10000" y1="0" x2="10000" y2="0" transform="translate(150, 200) rotate(-30)" />

将通过 (150, 200) 的斜率 π/6 弧度画一条(看似无穷无尽的)线。