Rotating a Line Segment : translate « SVG « XML






  1. XML
  2. SVG
  3. translate

Rotating a Line Segment

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
 "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="100%" height="100%">
  <g transform="translate(200,180)">
    <line x1="0" y1="0"
      x2="150"   y2="0"
      stroke-dasharray="4 4 4 4"
      stroke="blue" stroke-width="8"/>

    <line x1="0" y1="0"
      x2="150"   y2="0"
      stroke-dasharray="8 8 8 8"
      stroke="red" stroke-width="8">
      <animateTransform attributeName="transform"
                        attributeType="XML"
                        type="rotate"
                        from="0" to="360" dur="4s"/>
    </line>
  </g>
</svg>








Related examples in the same category

1.Using the SVG translate Function
2.Rotating Rectangles (rotation point: upper-left vertex)
3.Rotating Rectangles (rotation point: center)