svg translate

6.1 The `translate` Transformation

The command transform="translate(x,y)"

translates the shape with id="name" with command <use xlink:href="#name" transform="translate(x,y)"/>
translates coordinate system for the group with command <g transform="translate(x,y)">... </g>

Example

 <svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <g id="square" >
      <rect x="0" y="0" width="20" height="20" style="stroke-width:1; fill:none; stroke:black;"/>
    </g>

   <!-- Translate the #square -->
   <use xlink:href="#square" transform="translate(30,30)"/>

   <!-- Translate the group by a vector [100,100]
       translates the coordinate system for objects inside the group -->
   <g transform="translate(100,100)">by a vector [30,30]
       <rect x="0" y="0" width="20" height="20" style="fill:green;"/>
       <rect x="80" y="-100" width="20" height="20" style="fill:red;"/>
   </g>

   <!-- Outside the translate commands do not affect the coordinate system -->
   <rect x="180" y="180" width="20" height="20" style="fill:blue"/>

  <!-- Translate separate object inline -->
  <rect x="0" y="0" width="20" height="20" style="fill:aqua" transform="translate(0,100)"/>
  </svg>

6.1 The translate Transformation

6.1 The `translate` Transformation