title: How to position a SVG image(which its path has negative values) onto Google Map correctly
body: <p>I need to draw SVG pictures onto Google Map. The problem is:</p>
  
  <p>A. The SVG path has negative values, so if I don't shift these pictures, they will look like a quarter of themselves. e.g.
  (Here is the airplane only gets a quarter of its own displayed)</p>
  
  <p><img src="https://i.stack.imgur.com/N8ehL.png" alt="a quarter of the airplane its own"></p>
  
  <p>B. But if I shift it(by using padding-left, padding-top on the SVG element and I have a div wrapper, but if I add these style on the div, then it doesn't work), the displayed aircraft gets deviated from its track. It should be displayed right on the top of the green circled point, instead it is positioned below its correct position. </p>
  
  <p>And to give you a more straightforward view of my problem, here is the html code  </p>
  
  <pre><code>   &lt;div class="aircraft"&gt;
      &lt;svg version="1.1" style="padding-left:10px; padding-top:10px;"
           width="10px" height="10px" &gt;
          &lt;path fill="blue" stroke-width="3" 
                d="m 1 2 3" /&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>So the question is:</strong> </p>
  
  <p>How to display full svg images which their paths have negative values and position them correctly without being deviated.</p>
  
  <p>Thank you.</p>
  
  <hr>
  
  <p><strong>Update</strong> </p>
  
  <p>I saw one of the answers uses viewBox="-8.1 -7.6 50 50" and it solves the problem!
  But just wondering how did you calculate to get the values(both min-x,min-y and width,height in viewBox) of viewBox and make it display correctly?</p>
  
  <p>Because I will need to calculate the values of viewBox for each one of my many svg iamges</p>
  
  <hr>
  
  <p><strong>Update 2</strong></p>
  
  <p>Here is the code which tries to set correct value for viewBox of the svg, but it doesn't work.
  Here is the linke  ->  <a href="http://jsfiddle.net/MNP6P/4/" rel="nofollow noreferrer">http://jsfiddle.net/MNP6P/4/</a></p>
  
  <p>Html:</p>
  
  <pre><code>&lt;pre id="out"&gt;
  &lt;/pre&gt;
  
  &lt;svg version="1.1" width="100px" height="100px"&gt;
    &lt;path d="m 1 2 3" id="6"/&gt;
  
  &lt;/svg&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var  paths = document.querySelectorAll('svg path');
  var  lines = [];
  var bbox;
  for (var i=0; i&lt;paths.length; i++) {
      bbox = paths[i].getBBox();
      lines.push(bbox.x+" "+bbox.y+" "+bbox.width+" "+bbox.height );    
  }
  
  $('svg').attr("viewBox", lines[0]);
  
  
  document.getElementById("out").innerHTML = lines.join("\n");
  </code></pre>