title: How to setup svg to change position when resizing the window?
body: <p>In a browser window I have an svg containing an image.
  I also put some circles in this page.
  When I resize the window, the image resizes correct but the circles just stay on their absolute position.</p>
  
  <p>What is the best way to set this up?
  If possible, the circles should not resize but change their position.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
          &lt;meta name="robots" content="noindex, nofollow"&gt;
          &lt;meta name="googlebot" content="noindex, nofollow"&gt;
  
          &lt;style&gt;
              html,body{padding:0px; margin:0px; height:100%; width:100%;}
          &lt;/style&gt;
  
          &lt;script type="text/javascript" src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  
          &lt;title&gt;Test&lt;/title&gt;
  
          &lt;script type='text/javascript'&gt;//&lt;![CDATA[
  
              window.onload=function()
              {
  
                  function click()
                  {
                    // Ignore the click event if it was suppressed
                    if (d3.event.defaultPrevented) return;
  
                    // Extract the click location   
                    var point = d3.mouse(this)
                    , p = {x: point[0], y: point[1] };
  
  
                    //Append the group
                    var newGroup = d3.select("svg").append("g")
                        .attr("transform", "translate(" + p.x + "," + p.y + ")")
                        .attr("drgg", "")
                        .style("cursor", "pointer")
                        .on("mouseup", selremove)
                        .call(drag);
  
                      //Append the circle
                      var newCircle = newGroup.append("circle")
                        .attr("r", "25")
                        .attr("class", "dot")
                        .style("stroke", "#999999")
                        .style("fill", "#66B132")
                        .attr("opacity", 0.8);
  
                      //Append the text
                      var newText = newGroup.append("text")
                        .text("43")
                        .style("fill", "#FFFFFF")
                        .style("font-family", "Arial")
                        .style("font-size", "24px")
                        .style("text-anchor", "middle")
                        .style("alignment-baseline", "central")
                        .style("readonly", "true");
  
                  }
  
  
                  //Create the SVG
                  var svg = d3.select("body").append("svg")
                    .attr("width", "100%")
                    .attr("height", "100%")
                    .on("click", click);
  
                  //Add a background to the SVG
                  svg.append("rect")
                    .attr("width", "100%")
                    .attr("height", "100%")
                    .style("stroke", "#999999")
                    .style("fill", "#F6F6F6")
  
                  //Add a Background-Picture
                  var pPic = d3.select("body").select("svg").append("image")
                    .attr("opacity", 1.0)
                    .attr("width", "100%")
                    .attr("height", "100%")
                    .attr("preserveAspectRatio", "xMidyMid")
                    .attr("xlink:href", "https://m.bmw.de/content/dam/bmw/common/all-models/m-series/x6m/2014/model-card/X6-M-F86_ModelCard.png")
  
                  //Move or delete
                  function selremove() {
                    if (d3.select(this).attr("drgg") == "")
                    {
                      d3.select(this).remove();
                    } 
                    else
                    {
                      d3.select(this).attr("drgg", "");
                    }
                  }
  
                  function showinfo() {
                    //d3.select(this).attr("fill", "#000000");
                    var point = d3.mouse(this)
                    , p = {x: point[0], y: point[1] };
  
                    var newRect = svg.append("rectangle")
                      .attr("transform", "translate(" + p.x + "," + p.y + ")")
                      .attr("width", "25")
                      .attr("height", "25")
                      .style("stroke", "#999999")
                      .style("fill", "#FFFA83")
                      .attr("opacity", 1.0);
                  }
  
                  // Define drag beavior
                  var drag = d3.behavior.drag()
                      .on("drag", dragmove);
  
                  function dragmove()
                  {
                    var x = d3.event.x;
                    var y = d3.event.y;
  
                    d3.select(this)
                      .attr("transform", "translate(" + x + "," + y + ")")
                      .attr("drgg", "1");
  
                  }
              }//]]&gt; 
  
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script&gt;
            // tell the embed parent frame the height of the content
            if (window.parent &amp;&amp; window.parent.parent){
              window.parent.parent.postMessage(["resultsFrame", {
                height: document.body.getBoundingClientRect().height,
                slug: "None"
              }], "*")
            }
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>