title: Does x,y attributes of a SVG really work?
body: <p>I am working with <code>SVG</code> and a bit confused with <code>x</code> and <code>y</code> attributes of the <code>SVG</code> element itself. They do not appear to be working. Here is the code</p>
  
  <pre><code>$(document).ready(function(){
      console.log("Ready");
  
      var svg = d3.select('#container')
      .append('svg')
      .attr({
          x: 0,
          y: 0,
          width: 200,
          height: 100
      });
  
      svg.append('circle').attr({
          cx: 100,
          cy: 50,
          r: 30,
          'stroke': 'black',
          fill: 'white',
          'stroke-width': 1
      });
  });
  </code></pre>
  
  <p>When I change the <code>x</code> and <code>y</code> of the <code>SVG</code>, the <code>circle</code> is not moving accordingly. Say I want to start <code>SVG</code> at <code>(20, 10)</code> inside the parent <code>DIV</code>. I know I can move the <code>cx</code> and <code>cy</code> of the circle but I wanted to know why the <code>SVG</code> itself is not moving. Does it forcefully start at <code>(0, 0)</code> inside the parent <code>DOM</code> element? Then what are the <code>x</code> and <code>y</code> used for? Any help is appreciated. Thank you. </p>