如何正确地将SVG图像（其路径具有负值）定位到Google Map上

Question

我需要在Google Map上绘制SVG图片。问题是：

一个。 SVG路径具有负值，因此如果我不移动这些图片，它们将看起来像四分之一。例如 （这是飞机只能显示自己的四分之一）

B中。但是如果我移动它（通过在SVG元素上使用padding-left，padding-top并且我有div包装器，但是如果我在div上添加这些样式，那么它不起作用），显示的飞机偏离它的轨道。它应该显示在绿色圆圈点的顶部，而不是它位于正确的位置下方。

为了让您更直接地了解我的问题，这里是html代码

   <div class="aircraft">
    <svg version="1.1" style="padding-left:10px; padding-top:10px;"
         width="10px" height="10px" >
        <path fill="blue" stroke-width="3" 
              d="m 1 2 3" />
    </svg>
</div>

所以问题是：

如何显示其路径具有负值的完整svg图像并正确定位它们而不会偏离。

谢谢。

---

更新

我看到其中一个答案使用viewBox =“ - 8.1 -7.6 50 50”，它解决了问题！ 但只是想知道你是如何计算得到viewBox的值（min-x，min-y和width，viewBox中的高度）并使其正确显示？

因为我需要为我的许多svg iamges中的每一个计算viewBox的值

---

更新2

这是试图为svg的viewBox设置正确值的代码，但它不起作用。 这是linke - ＆gt; http://jsfiddle.net/MNP6P/4/

HTML：

<pre id="out">
</pre>

<svg version="1.1" width="100px" height="100px">
  <path d="m 1 2 3" id="6"/>

</svg>

使用Javascript：

var  paths = document.querySelectorAll('svg path');
var  lines = [];
var bbox;
for (var i=0; i<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");

Answer 1

为您的svg添加合适的viewBox：

<svg version="1.1" width="100px" height="100px" viewBox="-8.6 -7.1 16 14">
    <path fill="blue" stroke-width="3"
          d="m 1.4407594,6.9494512 -3,-6 -4,0 -2,0 -1,-1 1,-1 2,0 4,0 3,-6
             1,0 0,6 3,0 2,-3 0,8 0,0 -2,-3 -3,0 0,6 -1,0" />
</svg>

See here

现在SVG的内容将缩放并居中于SVG宽度和高度指定的区域。您需要做的就是定位SVG，使其位于您想要飞机的位置。所以对于SVG width="10px" height="10px"绝对将SVG定位在（planeX - 5，planeY - 5）等。