Элемент LINE

<line> элемент является базовой формой SVG, используется для создания линии, соединяющей две точки.

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <line x1="100" y1="0"  x2="175" y2="75"  stroke-width="2" stroke="black"/>
    <line x1="0"   y1="0"  x2="0"   y2="100" stroke-width="2" stroke="red" transform="rotate(-45)"/>
</svg>

Направление красной линии задано с помошью атрибута transform. С начала линия была задана как вертикальная, а затем добавляя параметры transform, добились измениния направление линии.

  1. SVG
  2. HTML