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

我需要在谷歌地图上绘制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”，它解决了问题！ 但我只是想知道如何计算viewBox的值（min-x、min-y和viewBox中的宽度、高度）并使其正确显示

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

---

更新2

下面的代码试图为svg的viewBox设置正确的值，但它不起作用。 这是链接->

Html:

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");

var path=document.querySelectorAll（'svg path'）；
var行=[]；
var-bbox；
对于（var i=0；i向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>




现在，SVG的内容将被缩放并集中在SVG宽度和高度指定的区域。然后，您需要做的就是定位SVG，使其中心位于您希望平面所在的位置。因此，对于SVG
width=“10px”height=“10px”
将SVG绝对定位在（planeX-5，planeY-5）等等。
向svg添加合适的
视图框
：

<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>




现在，SVG的内容将被缩放并集中在SVG宽度和高度指定的区域。然后，您需要做的就是定位SVG，使其中心位于您希望平面所在的位置。因此，对于SVG
width=“10px”height=“10px”
将SVG绝对定位在（planeX-5，planeY-5）等等。
向svg添加合适的
视图框
：

<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>




现在，SVG的内容将被缩放并集中在SVG宽度和高度指定的区域。然后，您需要做的就是定位SVG，使其中心位于您希望平面所在的位置。因此，对于SVG
width=“10px”height=“10px”
将SVG绝对定位在（planeX-5，planeY-5）等等。
向svg添加合适的
视图框
：

<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>




现在，SVG的内容将被缩放并集中在SVG宽度和高度指定的区域。然后，您需要做的就是定位SVG，使其中心位于您希望平面所在的位置。因此，对于SVG
width=“10px”height=“10px”
将SVG绝对定位在（planeX-5，planeY-5）等等。
谢谢你的帮助：）看来viewBox就是魔术师。但是我就是找不到一个好的教程来解释为什么你把-8.6和-7.1作为它的minx和miny。您是如何得到这些结果以使我的SVG正确显示的（这里非常感兴趣）？我有几个svg图像，所以我必须为每个图像获取正确的viewBox值。你能给我解释一下吗？非常感谢。这可能会有帮助。我将您的iconDefs转换为路径，并编写了一点Javascript来打印所有的BBox。您不能可靠地使用jQuery的方法来操作SVG元素。它设计用于HTML名称空间，而不是SVG名称空间。改用DOM的
setAttribute（）
方法。小写路径命令是相对的。所以你必须累积总数。1.4 -3 (=-1.6) -4 (=-5.6) - 2 (=-7.6) - 1 (=-8.6). 之后，相对X坐标为正值，因此绝对值（总和）增加（-8.6+1（=-7.6）等）-8.6是路径中最低的绝对X坐标。如果您还没有，请阅读SVG规范中的viewBox部分。感谢您的帮助：）看起来viewBox就是魔术师。但是我就是找不到一个好的教程来解释为什么你把-8.6和-7.1作为它的minx和miny。您是如何得到这些结果以使我的SVG正确显示的（这里非常感兴趣）？我有几个svg图像，所以我必须为每个图像获取正确的viewBox值。你能给我解释一下吗？非常感谢。这可能会有帮助。我将您的iconDefs转换为路径，并编写了一点Javascript来打印所有的BBox。您不能可靠地使用jQuery的方法来操作SVG元素。它设计用于HTML名称空间，而不是SVG名称空间。改用DOM的
setAttribute（）
方法。小写路径命令是相对的。所以你必须累积总数。1.4 -3 (=-1.6) -4 (=-5.6) - 2 (=-7.6) - 1 (=-8.6). 之后，相对X坐标为正值，因此绝对值（总和）增加（-8.6+1（=-7.6）等）-8.6是路径中最低的绝对X坐标。如果您还没有，请阅读SVG规范中的viewBox部分。感谢您的帮助：）看起来viewBox就是魔术师。但是我就是找不到一个好的教程来解释为什么你把-8.6和-7.1作为它的minx和miny。您是如何得到这些结果以使我的SVG正确显示的（这里非常感兴趣）？我有几个svg图像，所以我必须为每个图像获取正确的viewBox值。你能给我解释一下吗？非常感谢。这可能会有帮助。我将您的iconDefs转换为路径，并编写了一点Javascript来打印所有的BBox。你不能