Javascript 外部加载的SVG图像的外部顶点

我想将SVG图像的最外层顶点加载到网页中。是否有任何基于Javascript的库函数可用于解决上述问题

我尝试了snap.svg库。但我只能得到一箱svg。但我希望确切的顶点位于svg的最外层

我的加载svg和获取bbox的代码

    var s = Snap("#svg");
    Snap.load("myTestImg.svg", onSVGLoaded);

    function onSVGLoaded(data) {
        s.append(data);
        s.node.getBBox();
    } 

我的svg代码如下所示

<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="119.0" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="-118.812089225497 -118.812089225497 237.624178450994 242.624178450994" width="119.0" zoomAndPan="magnify"><g fill="none" stroke="black" stroke-width="0.00028525" transform="translate(0,0) scale(1, -1)">
<g id="NewFeatureType">
  <g id="Halo">
    <ellipse cx="-0.000118878670036793" cy="0.000118878465145826" rx="69.9997622428617" ry="69.9997622428617" style="fill:none;stroke:rgb(240,248,255);stroke-width:0;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points="-49.5,49.5 49.5,-49.5" style="fill:none;stroke:rgb(240,248,255);stroke-width:0;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points="49.5,49.5 -49.5,-49.5" style="fill:none;stroke:rgb(240,248,255);stroke-width:0;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points="82.14,82.35 -81.42,82.35 -81.42,-81.57 82.14,-81.57 82.14,82.35" style="fill:none;stroke:rgb(240,248,255);stroke-width:0;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points="-82.62,-2.18 -82.62,-2.18" style="fill:none;stroke:rgb(240,248,255);stroke-width:0;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points="81.19,-0.54 81.19,-0.54" style="fill:none;stroke:rgb(240,248,255);stroke-width:0;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points="1.93,-82.25 1.93,-82.25" style="fill:none;stroke:rgb(240,248,255);stroke-width:0;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points="0.14,79.5 0.14,79.5" style="fill:none;stroke:rgb(240,248,255);stroke-width:0;stroke-opacity:1;stroke-linecap:round"/>
  </g>
  <g id="Org">
    <ellipse cx="-0.000118878670036793" cy="0.000118878465145826" rx="69.9997622428617" ry="69.9997622428617" style="fill:none;stroke:rgb(0,255,0);stroke-width:5;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points="-49.5,49.5 49.5,-49.5" style="fill:none;stroke:rgb(0,255,0);stroke-width:5;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points="49.5,49.5 -49.5,-49.5" style="fill:none;stroke:rgb(0,255,0);stroke-width:5;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points="82.14,82.35 -81.42,82.35 -81.42,-81.57 82.14,-81.57 82.14,82.35" style="fill:none;stroke:rgb(0,255,0);stroke-width:5;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points="-82.62,-2.18 -82.62,-2.18" style="fill:none;stroke:rgb(0,255,0);stroke-width:5;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points="81.19,-0.54 81.19,-0.54" style="fill:none;stroke:rgb(0,255,0);stroke-width:5;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points="1.93,-82.25 1.93,-82.25" style="fill:none;stroke:rgb(0,255,0);stroke-width:5;stroke-opacity:1;stroke-linecap:round"/>
    <polyline points="0.14,79.5 0.14,79.5" style="fill:none;stroke:rgb(0,255,0);stroke-width:5;stroke-opacity:1;stroke-linecap:round"/>
    <ellipse cx="0" cy="0" rx="116.312089225497" ry="116.312089225497" style="fill:none;stroke:rgb(0,0,0);stroke-width:1;stroke-opacity:0"/>
  </g>
</g>

---

请提供一个解决方案，我是svg图像处理新手。

定义“最外顶点”。你的意思是说任何一点距离SVG的“中间”的距离最大，还是什么？是的。如果图像为矩形，则必须返回所有4个顶点。如果图像包含一个椭圆形，从中间稍微偏移，例如逆时针旋转13度，则需要返回什么？目前，仅由直线组成的形状需要解决方案。甚至是“直线”可以应用任何类型的变换、旋转等。我认为你在很大程度上低估了你正在处理的事情的复杂性。定义“最外面的顶点”。你的意思是说任何一点距离SVG的“中间”的距离最大，还是什么？是的。如果图像为矩形，则必须返回所有4个顶点。如果图像包含一个椭圆形，从中间稍微偏移，例如逆时针旋转13度，则需要返回什么？目前，仅由直线组成的形状需要解决方案。甚至是“直线”可以应用任何类型的变换、旋转等。我认为你严重低估了你在这里处理的事情的复杂性。