Question

我正在尝试使用土耳其在here之前创建的地图。

我更改了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”，则图像正常。

但我不明白它是如何运作的。

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平面的那部分，实际上应该渲染。如果您在此处选择了错误的值，则可能只会看到一个空白区域。

链接：

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

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

了解svg viewbox属性

2 个答案: