理解SVG的viewbox属性

Question

我正在尝试使用之前创建的土耳其地图，位于此处。

我已经更改了svg元素的尺寸。

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" 
     width="800" 
     height="600"
     style="shape-rendering:geometricPrecision;
            text-rendering:geometricPrecision; 
            image-rendering:optimizeQuality; 
            fill-rule:evenodd; 
            clip-rule:evenodd" 
     viewBox="0 0 180 180">

当我更改 viewBox 的值为

viewBox="0 0 200 200"

地图显示的尺寸较小。

如果我将值设置为“0 0 10 10”，则不会显示图像。

如果我将值设置为“0 0 50 50”，则会出现超出页面的巨大图像。

如果我将值设置为“0 0 100 100”，则图像正常显示。

但我不理解它是如何工作的。

- zkanoca

---

【CSS-Tricks SVG 文章】（http://css-tricks.com/mega-list-svg-information/） - Paulie_D

Answer 1

一个SVG画布基本上是一个无限平面，您可以在其中放置所有对象。

您定义的width和height确定图像在浏览器中显示的大小。这与您在HTML中包含任何其他图像的方式非常相似。

另一方面，使用viewBox属性选择您要查看的平面部分。

因此，使用"0 0 10 10"的值将显示的图像的左上角点设置为点0/0，然后从那里向右和向下选择10个单位的图像。在您的示例中，在上面的10个乘以10个单位的区域中没有任何内容，因此您只会看到一个透明区域，您会感知为“未显示”。

使用"0 0 50 50"的值，显示区域变得更大，您将开始看到图片的左上角。地图的第一部分变得可见。

最后，使用"0 0 100 100"，您可以看到大约一半的上部地图。

使用viewBox选择的区域将按比例缩放到SVG元素的height和width。两者结合可实现缩放SVG等功能。您可以使用属性preserveAspectRatio来控制缩放。

您可以在SVG文件底部添加以下代码，并查看显示的框（确保先设置viewBox="0 0 180 180"）：

 <rect x="0" y="0" width="100" height="100" style="stroke: blue; stroke-width: 1; fill: white; opacity: 0.8" />
 <rect x="0" y="0" width="50" height="50" style="stroke: green; stroke-width: 1; fill: none;" />
 <rect x="0" y="0" width="10" height="10" style="stroke: red; stroke-width: 1; fill: none;" />

 <text x="5" y="97" style="fill: blue; font-size: 5px;">100x100</text>
 <text x="5" y="47" style="fill: green; font-size: 5px;">50x50</text>
 <text x="5" y="15" style="fill: red; font-size: 5px;">10x10</text>

---

因此，viewBox 的目的是选择应该呈现的无限 SVG 平面的那一部分。如果您在这里选择错误的值，可能会看到一个空白区域。

链接：

- preserveAspectRatio @MDN - viewBox @MDN

- Sirko

Answer 2

使用具有宽度和高度值的Viewbox，您可以在SVG中进行缩放和平移。

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" 
     width="800" 
     height="600"
     viewBox="0 0 800 600">

在视口中，800像素宽度不进行缩放，等于屏幕上的800像素宽度

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" 
     width="800" 
     height="600"
     viewBox="0 0 1600 1200">

所有的东西都被缩小了，所以1600像素宽的线只显示为800像素宽。

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" 
     width="800" 
     height="600"
     viewBox="400 300 400 300">

将800x600屏幕的右下1/4放大，使该部分填满整个SVG，不要显示300像素线以上或400像素线左侧的任何内容。

- Wayne