title: A generic JS function to move any SVG element
body: <p>Considering this example with 2 circles (red and blue):</p>
  
  <pre><code>&lt;svg width="500px" height="500px"&gt;
    &lt;circle cx="100" cy="50" r="40" fill="red" id="redcircle" /&gt;
    &lt;g transform="translate(200,-20)"&gt;
      &lt;g transform="scale(2)"&gt;
        &lt;g transform="rotate(45)"&gt;
          &lt;g transform="translate(5,10)"&gt;
            &lt;circle cx="100" cy="50" r="40" fill="blue" id="bluecircle" /&gt;
          &lt;/g&gt;
        &lt;/g&gt;
      &lt;/g&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I wonder if there is a way to write a generic function like:</p>
  
  <pre><code>function move(selection){
    // ???
  }
  </code></pre>
  
  <p>That would allow to write <code>move("#redcircle")</code> or <code>move("#bluecircle")</code> which would visually move the target element 100px to the right (for example).</p>