css-transforms-1/examples/compound_transform.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="270" height="270">
  <defs>
    <style type="text/css"><![CDATA[
      rect { fill: #00a6ff; }
      
      .arrow {
        stroke: black;
        fill: none;
        marker-end: url(#marker-end);
      }
      
      text {
        font-size: 11pt;
        font-family: sans-serif;
      }
      
      .transform {
        fill: none;
        stroke: black;
        stroke-width: 1px;
        stroke-dasharray: 6 4;
      }
      
      .canvas {
        fill: none;
        stroke: black;
      }
      ]]>
    </style>
    <marker id="marker-end" viewBox="0 0 10 10" refX="10" refY="5" 
      markerUnits="strokeWidth" orient="auto"
      markerWidth="10" markerHeight="15">
      <polyline points="0,0 10,5 0,10 1,5" fill="black" />
    </marker>
  </defs>
  
  <rect x="5" y="5" width="260" height="260" class="canvas"/>
  
  <rect x="40" y="40" width="70" height="70" opacity="0.5"/>

  <rect x="100" y="100" width="70" height="70" class="transform"/>
  <rect x="82.5" y="82.5" width="105" height="105" class="transform"/>
  
  <path d="M170,35 Q140,60 140,100" class="arrow"/>
  <path d="M45,190 Q45,155 73,144" class="arrow"/>
  <path d="M205,205 Q205,185 187.5,170" class="arrow"/>  

  <text x="110" y="25">translate(80px, 80px)</text>
  <text x="10" y="205">rotate(45deg)</text>
  <text x="160" y="220">scale(1.5, 1.5)</text>

  <rect x="82.5" y="82.5" width="105" height="105" opacity="0.75" transform="rotate(45, 135, 135)"/>  

  <text x="60" y="250">Compound transform</text>
</svg>