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

时间:2019-02-19 11:23:13

标签: javascript snap.svg

我想将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图像处理的新手。

0 个答案:

没有答案