SVG.js：没有显示大范围 SVG？

Question

我有这段代码，效果很好。

<html>
        <header>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.4/svg.min.js"></script>
                <script   src="http://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
                <script>
$(document).ready(function() {
        jQuery.get('Arctic_big.svg', function(data) {
                var draw = SVG('svgimage').size(300,300);
                var svg = new XMLSerializer().serializeToString(data);
                var rect = draw.svg(svg);
                //draw.svg(new XMLSerializer().serializeToString(data));
        });
});
                </script>
        </header>
        <body>
                <div style="width:100%" id="svgimage"></div>
        </body>
</html>

我可以在浏览器中看到地图。但是，当我尝试 big-svg.svg 时，它不起作用。事实上，当我查看 html 时，它呈现的是一个空的 svg:

<svg id="SvgjsSvg1001" width="2" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" style="overflow: hidden; top: -100%; left: -100%; position: absolute; opacity: 0;"><defs id="SvgjsDefs1002"></defs><polyline id="SvgjsPolyline1003" points="0,0"></polyline><path id="SvgjsPath1004" d="M0 0 "></path></svg>

Arctic_big.svg 是一个更大的文件，但是 big-svg.svg 的边界相当大 - 它在一个巨大的坐标 space 上。我可能需要以某种方式缩放它以适合它，但如果它甚至没有制作任何物体，我认为这不是问题。它还使用路径而不是多段线。任何 advice/help 关于让这个大 svg.svg 在 svg.js 中呈现？

Arctic_big.svg: https://commons.wikimedia.org/wiki/File:Arctic_big.svg#/media/File:Arctic_big.svg
大-svg.svg: 托管于此：https://pastebin.com/Cns1uJ6i

Answer 1

简短版本：如果您从正在导入的 SVG 中删除大小（宽度和高度）属性，您应该会发现它可以正常工作。下图显示了它的外观。

<svg width="196812.5" height="55975" viewBox="662.5 375 196812.5 55975" version="1.1" xmlns="http://www.w3.org/2000/svg" style="stroke-linecap:round;stroke-linejoin:round;fill:none">

对比：

<svg viewBox="662.5 375 196812.5 55975" version="1.1" xmlns="http://www.w3.org/2000/svg" style="stroke-linecap:round;stroke-linejoin:round;fill:none">

SVG 中的宽度和高度属性（奇怪地）实际上描述了像素数。由于 svg 的优点在于它与分辨率无关，所以我不确定这背后的逻辑是什么。无论如何，是 viewBox 编号为您提供坐标 space 并允许使用任意单位进行绘图。

我认为在大多数情况下最好的办法是使用没有宽度或高度的 SVG，并且只依赖于 viewBox。我认为很多图形程序在设计时都考虑到了打印，因此它们在保存 svg 图像时设置了绝对大小。

Picture of different size attributes

顶部：Artic_big 和 width/height

中间：Artic_big 没有 width/height

底部：Big-svg 没有 width/height

SVG.js：没有显示大范围 SVG？

SVG.js: large bounds SVG's don't show up?

svg

svg.js