SVG - Transform: Point Rotation

The acronym SVG stands for Scalable Vector Graphics and refers to graphics that are generated by a geometric specification rather than by pixels, like an image (called rasterized graphics as opposed to the vectorized graphics described here).

Transformations in SVG allow shapes to be transformed as a whole unit. This example transforms a set of four points that are given as a polygon. The transformation of each point is shown via the arrows.

SvgPointRotation.html

<!DOCTYPE html>
<html>
<head>
    <title>XoaX.net's HTML</title>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
	<!-- A small translation to move out of the corner for visibility -->
    <g transform="translate(50,50)">
    <!-- The original square -->
      <polygon points="0,0 0,100 100,100 100,0" fill="none" stroke="#CCCCCC" stroke-width="2"/>
      <g fill="#CCCCCC" >
        <circle cx="0" cy="0" r="4"/>
        <circle cx="0" cy="100" r="4"/>
        <circle cx="100" cy="100" r="4"/>
        <circle cx="100" cy="0" r="4"/>
        <circle cx="50" cy="50" r="4"/>
      </g>
      <g transform="rotate(30,50,50)">
      	<!-- The rotated square -->
        <polygon points="0,0 0,100 100,100 100,0" fill="none" stroke="#00AA00" stroke-width="2"/>
        <g fill="#00AA00" >
          <circle cx="0" cy="0" r="4"/>
          <circle cx="0" cy="100" r="4"/>
          <circle cx="100" cy="100" r="4"/>
          <circle cx="100" cy="0" r="4"/>
        </g>
      </g>
      <!-- Arrows the indicate the translation of each vertex -->
      <!-- markerUnits="strokeWidth" scales the marker according to the stroke width -->
      <!-- markerUnits="strokeWidth" is the default behavior if nothing is specified -->
      <marker id="markerArrow" markerWidth="7" markerHeight="7" refX="6" refY="3" orient="auto"
        markerUnits="strokeWidth">
	    <path d="M0,0 L0,6 L6,3 L0,0" style="fill: #FF0000;" />
	  </marker>
	  <!-- sin(x+y) = sin(x)cos(y)+cos(x)sin(y) -->
	  <!-- cos(x+y) = cos(x)cos(y)-sin(x)sin(y) -->
      <line x1="0" y1="0" x2="31.7" y2="-18.3" style="stroke: #FF0000; stroke-width:2px;
        marker-end: url(#markerArrow); opacity: .5;" />
      <line x1="0" y1="100" x2="-18.3" y2="68.3" style="stroke: #FF0000; stroke-width:2px;
        marker-end: url(#markerArrow); opacity: .5;" />
      <line x1="100" y1="100" x2="68.3" y2="118.3" style="stroke: #FF0000; stroke-width:2px;
        marker-end: url(#markerArrow); opacity: .5;" />
      <line x1="100" y1="0" x2="118.3" y2="31.7" style="stroke: #FF0000; stroke-width:2px;
        marker-end: url(#markerArrow); opacity: .5;" />
      <text x="-40" y="140" fill="#00AA00">transform="rotate(30,50,50)"</text>
    </g>
  </svg>
</body>
</html>

Core HTML

SVG - Transform: Point Rotation

SvgPointRotation.html

Output