SVG HTML

Reusing a Line to Draw a Triangle

This SVG example illustrates how to reuse a line segment with the use element to draw a triangle.

ReusingLine.svg

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 2 2">
  <!-- This transformation flips y and puts the coordinates in the standard orientation -->
  <g transform="scale(1,-1)">
    <g id="idSide">
      <line x1="0" y1="0.577" x2="-.5" y2="-.289" stroke="black" stroke-width=".001" />
    </g>
    <use href="#idSide" transform="rotate(120)" />
    <use href="#idSide" transform="rotate(240)" />
  </g>
  <circle cx="0" cy="0" r=".289" fill="none" stroke="#C0C0C0" stroke-width=".001" />
  <circle cx="0" cy="0" r=".577" fill="none" stroke="#C0C0C0" stroke-width=".001" />
</svg>
 

Output

 
 

© 2007–2025 XoaX.net LLC. All rights reserved.