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.com/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的界限非常大 - 它位于一个巨大的坐标空间。我可能需要以某种方式缩放它以使它适合，但如果它甚至不做任何对象，我不认为这是问题。它也使用路径而不是折线。有关在svg.js中渲染此big-svg.svg的建议/帮助吗？

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">

VS

<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数字可以为您提供坐标空间，并允许使用任意单位进行绘制。

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

Picture of different size attributes

TOP：Artic_big的宽度/高度

MIDDLE：没有宽度/高度的Artic_big

BOTTOM：没有宽度/高度的大svg

SVG.js：大边界SVG没出现？

1 个答案: