SVG line in y=mx+c format
The <line>
tag only supports start and end attributes (x1
, y1
, x2
, y2
). As such, you'll need to pick x coordinates outside your canvas manually and use y2
= y1
+ m(x2
- x1
).
Edit
Looking through the spec, it's possible to transform individual elements as required:
<line ... transform="translate(x, y) rotate(theta)" />
Where theta
is the angle of clockwise rotation in degrees.
So you could draw a long horizontal line from (-10000, 0) to (10000, 0), say, and then apply the appropriate rotation and translation to position it:
<line x1="-10000" y1="0" x2="10000" y2="0" transform="translate(150, 200) rotate(-30)" />
Will draw a (seemingly endless) line through (150, 200) of slope π/6 radians.