理解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”图像就很好。

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

Answer 1

SVG 画布基本上是一个无尽的平原，您可以将所有对象放入其中。

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

另一方面，通过该viewBox属性，您可以选择当前想要查看的平原部分。

因此，您可以将值设置为所显示图像"0 0 10 10"的左上角点，然后从那里为图像选择右侧和底部 10 个单位。在您的示例中，在上面的 10 × 10 单位区域中什么都没有，因此您只看到一个透明区域，您将其视为“未显示”。0/0

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

最后"0 0 100 100"你可以看到上图的一半了。

您选择使用的区域会根据SVG 元素的和viewBox进行缩放。将两者结合起来，您可以启用诸如缩放 SVG 之类的功能。您可以使用属性控制缩放。heightwidthpreserveAspectRatio

您可以在 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