[SVG] How to draw a straight line?

2020-12-09 03:38:11 | Web Design | 1k+ Reads

Copyright Notice: This article is an original work licensed under the CC 4.0 BY-NC-ND license. If you wish to repost this article, please include the original source link and this copyright notice.
Source link: https://v2know.com/article/547

Previous: [SVG] How to draw polygons?

Code:

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

Result:

 

 

  • The x1 attribute defines the start of the line on the x axis
  • The y1 attribute defines the start of the line on the y axis
  • The x2 attribute defines the end of the line on the x axis
  • The y2 attribute defines the end of the line on the y axis
  • The stroke attribute defines the color of the line
  • The stroke-width attribute defines the thickness of the line

Next: [SVG] How to write text?

This article was last edited at 2020-12-09 03:45:59