我想将SVG图像的最外顶点加载到网页上。是否有任何基于Javascript的库函数可用于解决上述问题?
我尝试了snap.svg库。但是我只能得到svg的bbox。但是我想要确切的顶点位于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图像处理的新手。