如何以编程方式查找svg的大小？

Question

我有许多不同组件的svg文件。这些组件中的每一个都可能包含或不包含“端口”，在确定svg的大小时我想忽略这些“端口”。例如，我有两种不同的svg：

<svg width="263" height="203" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g class="component">
        <polygon points="41.5,201.5 241.5,201.5 241.5,1.5 41.5,1.5" fill="#FFFFFF" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        <polyline points="41.5,41.5 67.5,77.5 97.5,77.5" fill-opacity="0" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        <polyline points="41.5,161.5 67.5,129.5 99.5,129.5" fill-opacity="0" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        <polygon points="191.5,101.5 191.3,97.2 190.8,92.9 189.8,88.7 188.6,84.6 186.9,80.6 185.0,76.8 182.7,73.2 180.1,69.7 177.2,66.5 174.1,63.6 170.7,60.9 167.1,58.6 163.3,56.5 159.4,54.8 155.3,53.4 151.1,52.4 146.9,51.8 142.6,51.5 138.3,51.6 134.0,52.1 129.8,52.9 125.6,54.1 121.6,55.6 117.8,57.5 114.1,59.7 110.6,62.2 107.3,65.0 104.3,68.1 101.6,71.4 99.1,75.0 97.0,78.7 95.2,82.6 93.8,86.7 92.7,90.8 91.9,95.1 91.5,99.3 91.5,103.7 91.9,107.9 92.7,112.2 93.8,116.3 95.2,120.4 97.0,124.3 99.1,128.0 101.6,131.6 104.3,134.9 107.3,138.0 110.6,140.8 114.1,143.3 117.8,145.5 121.6,147.4 125.6,148.9 129.8,150.1 134.0,150.9 138.3,151.4 142.6,151.5 146.9,151.2 151.1,150.6 155.3,149.6 159.4,148.2 163.3,146.5 167.1,144.4 170.7,142.1 174.1,139.4 177.2,136.5 180.1,133.3 182.7,129.8 185.0,126.2 186.9,122.4 188.6,118.4 189.8,114.3 190.8,110.1 191.3,105.8" fill-opacity="0" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        <polyline points="191.5,101.5 241.5,101.5" fill-opacity="0" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        <text x="141.5" y="133.8" text-anchor="middle" fill="#000000" font-size="90.3px" font-family="sans-serif">+</text>
        <text x="94.0" y="48.7" text-anchor="middle" fill="#000000" font-size="53.1px" font-family="sans-serif">1</text>
        <text x="94.0" y="192.7" text-anchor="middle" fill="#000000" font-size="53.1px" font-family="sans-serif">1</text>
        <g id="u1" class="port">
            <polygon points="1.5,21.5 41.5,41.5 1.5,61.5" fill="#00007F" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        </g>
        <g id="u2" class="port">
            <polygon points="1.5,141.5 41.5,161.5 1.5,181.5" fill="#00007F" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        </g>
        <g id="y" class="port">
            <polygon points="241.5,91.5 261.5,101.5 241.5,111.5" fill="#FFFFFF" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        </g>
    </g>
</svg>

<svg width="223" height="203" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g class="component">
        <polygon points="1.5,201.5 201.5,201.5 201.5,1.5 1.5,1.5" fill="#FFFFFF" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        <polyline points="21.5,33.5 21.5,181.5" fill-opacity="0" stroke="#C0C0C0" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        <polygon points="21.5,11.5 13.5,33.5 29.5,33.5" fill="#C0C0C0" stroke="#C0C0C0" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        <polyline points="11.5,101.5 169.5,101.5" fill-opacity="0" stroke="#C0C0C0" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        <polygon points="191.5,101.5 169.5,93.5 169.5,109.5" fill="#C0C0C0" stroke="#C0C0C0" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        <polyline points="21.5,101.5 27.2,84.4 30.7,73.8 33.8,65.0 36.4,57.8 36.4,57.8 38.2,53.3 39.9,49.1 41.6,45.2 43.2,41.8 43.2,41.8 44.5,39.2 45.7,36.8 46.9,34.7 48.1,32.7 49.2,31.0 49.2,31.0 50.7,29.1 52.1,27.4 53.5,25.9 54.9,24.6 54.9,24.6 56.8,23.4 58.6,22.5 60.5,22.0 60.5,22.0 62.4,22.0 64.2,22.5 66.1,23.3 66.1,23.3 67.5,24.2 68.9,25.4 70.3,26.7 71.8,28.4 71.8,28.4 72.9,29.8 74.0,31.4 75.2,33.1 76.3,35.0 77.4,37.0 77.4,37.0 78.8,39.7 80.3,42.7 81.8,46.1 83.4,49.8 83.4,49.8 85.6,55.3 88.0,61.6 90.6,68.8 90.6,68.8 93.8,78.1 98.0,90.6 103.1,106.3 103.1,106.3 108.2,121.8 112.3,133.7 115.2,142.0 115.2,142.0 117.0,146.7 118.7,151.0 120.4,155.0 122.0,158.7 122.0,158.7 123.3,161.4 124.5,163.9 125.7,166.2 126.9,168.3 128.0,170.2 128.0,170.2 129.4,172.3 130.8,174.2 132.2,175.8 133.6,177.2 133.6,177.2 135.5,178.8 137.4,180.0 139.3,180.7 139.3,180.7 141.2,181.0 143.0,180.9 144.9,180.3 144.9,180.3 146.8,179.3 148.7,177.9 150.6,176.0 150.6,176.0 152.0,174.4 153.4,172.6 154.8,170.5 156.2,168.2 156.2,168.2 157.3,166.2 158.5,164.0 159.7,161.5 160.9,158.9 162.2,156.0 162.2,156.0 164.4,150.7 166.8,144.5 169.4,137.5 169.4,137.5 172.1,129.9 174.8,122.0 177.5,113.9 181.5,101.5" fill-opacity="0" stroke="#000000" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        <g id="y" class="port">
            <polygon points="201.5,91.5 221.5,101.5 201.5,111.5" fill="#FFFFFF" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        </g>
    </g>
</svg>

将svg加载到我的HTML后，有没有办法计算每个svg图像的大小，同时忽略每个文件中可能包含的任何“端口”对象？ svg标签中定义的width和height属性告诉我整个图像的大小，但我想知道没有端口的图像大小。此外，我希望能够知道没有端口的图像大小左上角的偏移量。即如果左侧没有端口，则偏移量为0，如果左侧有一个端口，则偏移量将等于左侧端口占用的宽度。

Answer 1

如果你进行了一些预处理，并将你的svg组件组织成两组 - ＆＃34; body＆＃34;和＃34;端口＆＃34; - 你可以这样做：

＆＃13;

＆＃13;

// For each SVG, call the getBBoxWithoutPort() function.
document.querySelectorAll('svg').forEach(function(svg) {
  console.log(getBBoxWithoutPort(svg));
});

function getBBoxWithoutPort(el) {
  // get a reference to the body group
  var body = el.querySelector('.body');
  // Return its size
  return body.getBBox();
}

＆＃13;

<svg width="263" height="203" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g class="component">
        <g class="body">
            <polygon points="41.5,201.5 241.5,201.5 241.5,1.5 41.5,1.5" fill="#FFFFFF" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
            <polyline points="41.5,41.5 67.5,77.5 97.5,77.5" fill-opacity="0" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
            <polyline points="41.5,161.5 67.5,129.5 99.5,129.5" fill-opacity="0" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
            <polygon points="191.5,101.5 191.3,97.2 190.8,92.9 189.8,88.7 188.6,84.6 186.9,80.6 185.0,76.8 182.7,73.2 180.1,69.7 177.2,66.5 174.1,63.6 170.7,60.9 167.1,58.6 163.3,56.5 159.4,54.8 155.3,53.4 151.1,52.4 146.9,51.8 142.6,51.5 138.3,51.6 134.0,52.1 129.8,52.9 125.6,54.1 121.6,55.6 117.8,57.5 114.1,59.7 110.6,62.2 107.3,65.0 104.3,68.1 101.6,71.4 99.1,75.0 97.0,78.7 95.2,82.6 93.8,86.7 92.7,90.8 91.9,95.1 91.5,99.3 91.5,103.7 91.9,107.9 92.7,112.2 93.8,116.3 95.2,120.4 97.0,124.3 99.1,128.0 101.6,131.6 104.3,134.9 107.3,138.0 110.6,140.8 114.1,143.3 117.8,145.5 121.6,147.4 125.6,148.9 129.8,150.1 134.0,150.9 138.3,151.4 142.6,151.5 146.9,151.2 151.1,150.6 155.3,149.6 159.4,148.2 163.3,146.5 167.1,144.4 170.7,142.1 174.1,139.4 177.2,136.5 180.1,133.3 182.7,129.8 185.0,126.2 186.9,122.4 188.6,118.4 189.8,114.3 190.8,110.1 191.3,105.8" fill-opacity="0" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
            <polyline points="191.5,101.5 241.5,101.5" fill-opacity="0" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
            <text x="141.5" y="133.8" text-anchor="middle" fill="#000000" font-size="90.3px" font-family="sans-serif">+</text>
            <text x="94.0" y="48.7" text-anchor="middle" fill="#000000" font-size="53.1px" font-family="sans-serif">1</text>
            <text x="94.0" y="192.7" text-anchor="middle" fill="#000000" font-size="53.1px" font-family="sans-serif">1</text>
        </g>
        <g class="ports">
            <g id="u1" class="port">
                <polygon points="1.5,21.5 41.5,41.5 1.5,61.5" fill="#00007F" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
            </g>
            <g id="u2" class="port">
                <polygon points="1.5,141.5 41.5,161.5 1.5,181.5" fill="#00007F" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
            </g>
            <g id="y" class="port">
                <polygon points="241.5,91.5 261.5,101.5 241.5,111.5" fill="#FFFFFF" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
            </g>
        </g>
    </g>
</svg>

<svg width="223" height="203" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g class="component">
        <g class="body">
            <polygon points="1.5,201.5 201.5,201.5 201.5,1.5 1.5,1.5" fill="#FFFFFF" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
            <polyline points="21.5,33.5 21.5,181.5" fill-opacity="0" stroke="#C0C0C0" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
            <polygon points="21.5,11.5 13.5,33.5 29.5,33.5" fill="#C0C0C0" stroke="#C0C0C0" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
            <polyline points="11.5,101.5 169.5,101.5" fill-opacity="0" stroke="#C0C0C0" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
            <polygon points="191.5,101.5 169.5,93.5 169.5,109.5" fill="#C0C0C0" stroke="#C0C0C0" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
            <polyline points="21.5,101.5 27.2,84.4 30.7,73.8 33.8,65.0 36.4,57.8 36.4,57.8 38.2,53.3 39.9,49.1 41.6,45.2 43.2,41.8 43.2,41.8 44.5,39.2 45.7,36.8 46.9,34.7 48.1,32.7 49.2,31.0 49.2,31.0 50.7,29.1 52.1,27.4 53.5,25.9 54.9,24.6 54.9,24.6 56.8,23.4 58.6,22.5 60.5,22.0 60.5,22.0 62.4,22.0 64.2,22.5 66.1,23.3 66.1,23.3 67.5,24.2 68.9,25.4 70.3,26.7 71.8,28.4 71.8,28.4 72.9,29.8 74.0,31.4 75.2,33.1 76.3,35.0 77.4,37.0 77.4,37.0 78.8,39.7 80.3,42.7 81.8,46.1 83.4,49.8 83.4,49.8 85.6,55.3 88.0,61.6 90.6,68.8 90.6,68.8 93.8,78.1 98.0,90.6 103.1,106.3 103.1,106.3 108.2,121.8 112.3,133.7 115.2,142.0 115.2,142.0 117.0,146.7 118.7,151.0 120.4,155.0 122.0,158.7 122.0,158.7 123.3,161.4 124.5,163.9 125.7,166.2 126.9,168.3 128.0,170.2 128.0,170.2 129.4,172.3 130.8,174.2 132.2,175.8 133.6,177.2 133.6,177.2 135.5,178.8 137.4,180.0 139.3,180.7 139.3,180.7 141.2,181.0 143.0,180.9 144.9,180.3 144.9,180.3 146.8,179.3 148.7,177.9 150.6,176.0 150.6,176.0 152.0,174.4 153.4,172.6 154.8,170.5 156.2,168.2 156.2,168.2 157.3,166.2 158.5,164.0 159.7,161.5 160.9,158.9 162.2,156.0 162.2,156.0 164.4,150.7 166.8,144.5 169.4,137.5 169.4,137.5 172.1,129.9 174.8,122.0 177.5,113.9 181.5,101.5" fill-opacity="0" stroke="#000000" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        </g>
        <g class="ports">
            <g id="y" class="port">
                <polygon points="201.5,91.5 221.5,101.5 201.5,111.5" fill="#FFFFFF" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
            </g>
        </g>
    </g>
</svg>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以

• 遍历你的svg元素，
• 删除你不想要的孩子，
• 获取svg的BBox，
• 将删除的元素重新附加到原来的位置。

ES6实施需要对ES5浏览器进行转换或完全重写。

＆＃13;

＆＃13;

console.log(
  [...document.querySelectorAll('svg')]
    .map(getBBoxWithoutPort)
);

function getBBoxWithoutPort(el) {
  // grab all the .port elements and store in an Array
  const ports = [...el.querySelectorAll('.port')];
  ports.forEach(p => {
    // store their parentNode and nextSibling
    p._parent = p.parentNode;
    p._next = p.nextElementSibling;
    // remove it from the DOM
    p.remove();
  });
  // now get the size of the parent SVG node
  const size = el.getBBox();
  ports.forEach(p => {
    // re-append your removed elements
    p._parent.insertBefore(p, (p._next && p._next.parentNode) ? p._next : null);
    // clean
    delete p._parent;
    delete p._next;
  });
  return size;
}

＆＃13;

<svg width="263" height="203" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g class="component">
        <polygon points="41.5,201.5 241.5,201.5 241.5,1.5 41.5,1.5" fill="#FFFFFF" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        <polyline points="41.5,41.5 67.5,77.5 97.5,77.5" fill-opacity="0" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        <polyline points="41.5,161.5 67.5,129.5 99.5,129.5" fill-opacity="0" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        <polygon points="191.5,101.5 191.3,97.2 190.8,92.9 189.8,88.7 188.6,84.6 186.9,80.6 185.0,76.8 182.7,73.2 180.1,69.7 177.2,66.5 174.1,63.6 170.7,60.9 167.1,58.6 163.3,56.5 159.4,54.8 155.3,53.4 151.1,52.4 146.9,51.8 142.6,51.5 138.3,51.6 134.0,52.1 129.8,52.9 125.6,54.1 121.6,55.6 117.8,57.5 114.1,59.7 110.6,62.2 107.3,65.0 104.3,68.1 101.6,71.4 99.1,75.0 97.0,78.7 95.2,82.6 93.8,86.7 92.7,90.8 91.9,95.1 91.5,99.3 91.5,103.7 91.9,107.9 92.7,112.2 93.8,116.3 95.2,120.4 97.0,124.3 99.1,128.0 101.6,131.6 104.3,134.9 107.3,138.0 110.6,140.8 114.1,143.3 117.8,145.5 121.6,147.4 125.6,148.9 129.8,150.1 134.0,150.9 138.3,151.4 142.6,151.5 146.9,151.2 151.1,150.6 155.3,149.6 159.4,148.2 163.3,146.5 167.1,144.4 170.7,142.1 174.1,139.4 177.2,136.5 180.1,133.3 182.7,129.8 185.0,126.2 186.9,122.4 188.6,118.4 189.8,114.3 190.8,110.1 191.3,105.8" fill-opacity="0" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        <polyline points="191.5,101.5 241.5,101.5" fill-opacity="0" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        <text x="141.5" y="133.8" text-anchor="middle" fill="#000000" font-size="90.3px" font-family="sans-serif">+</text>
        <text x="94.0" y="48.7" text-anchor="middle" fill="#000000" font-size="53.1px" font-family="sans-serif">1</text>
        <text x="94.0" y="192.7" text-anchor="middle" fill="#000000" font-size="53.1px" font-family="sans-serif">1</text>
        <g id="u1" class="port">
            <polygon points="1.5,21.5 41.5,41.5 1.5,61.5" fill="#00007F" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        </g>
        <g id="u2" class="port">
            <polygon points="1.5,141.5 41.5,161.5 1.5,181.5" fill="#00007F" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        </g>
        <g id="y" class="port">
            <polygon points="241.5,91.5 261.5,101.5 241.5,111.5" fill="#FFFFFF" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        </g>
    </g>
</svg>

<svg width="223" height="203" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g class="component">
        <polygon points="1.5,201.5 201.5,201.5 201.5,1.5 1.5,1.5" fill="#FFFFFF" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        <polyline points="21.5,33.5 21.5,181.5" fill-opacity="0" stroke="#C0C0C0" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        <polygon points="21.5,11.5 13.5,33.5 29.5,33.5" fill="#C0C0C0" stroke="#C0C0C0" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        <polyline points="11.5,101.5 169.5,101.5" fill-opacity="0" stroke="#C0C0C0" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        <polygon points="191.5,101.5 169.5,93.5 169.5,109.5" fill="#C0C0C0" stroke="#C0C0C0" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        <polyline points="21.5,101.5 27.2,84.4 30.7,73.8 33.8,65.0 36.4,57.8 36.4,57.8 38.2,53.3 39.9,49.1 41.6,45.2 43.2,41.8 43.2,41.8 44.5,39.2 45.7,36.8 46.9,34.7 48.1,32.7 49.2,31.0 49.2,31.0 50.7,29.1 52.1,27.4 53.5,25.9 54.9,24.6 54.9,24.6 56.8,23.4 58.6,22.5 60.5,22.0 60.5,22.0 62.4,22.0 64.2,22.5 66.1,23.3 66.1,23.3 67.5,24.2 68.9,25.4 70.3,26.7 71.8,28.4 71.8,28.4 72.9,29.8 74.0,31.4 75.2,33.1 76.3,35.0 77.4,37.0 77.4,37.0 78.8,39.7 80.3,42.7 81.8,46.1 83.4,49.8 83.4,49.8 85.6,55.3 88.0,61.6 90.6,68.8 90.6,68.8 93.8,78.1 98.0,90.6 103.1,106.3 103.1,106.3 108.2,121.8 112.3,133.7 115.2,142.0 115.2,142.0 117.0,146.7 118.7,151.0 120.4,155.0 122.0,158.7 122.0,158.7 123.3,161.4 124.5,163.9 125.7,166.2 126.9,168.3 128.0,170.2 128.0,170.2 129.4,172.3 130.8,174.2 132.2,175.8 133.6,177.2 133.6,177.2 135.5,178.8 137.4,180.0 139.3,180.7 139.3,180.7 141.2,181.0 143.0,180.9 144.9,180.3 144.9,180.3 146.8,179.3 148.7,177.9 150.6,176.0 150.6,176.0 152.0,174.4 153.4,172.6 154.8,170.5 156.2,168.2 156.2,168.2 157.3,166.2 158.5,164.0 159.7,161.5 160.9,158.9 162.2,156.0 162.2,156.0 164.4,150.7 166.8,144.5 169.4,137.5 169.4,137.5 172.1,129.9 174.8,122.0 177.5,113.9 181.5,101.5" fill-opacity="0" stroke="#000000" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        <g id="y" class="port">
            <polygon points="201.5,91.5 221.5,101.5 201.5,111.5" fill="#FFFFFF" stroke="#00007F" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" />
        </g>
    </g>
</svg>

＆＃13;

＆＃13;

＆＃13;