了解svg的viewbox属性

我想使用在here之前创建的土耳其地图。了解svg的viewbox属性

当我改变视框值

viewBox="0 0 200 200"

地图被在较小的尺寸再现我已经改变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">

的尺寸。

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

如果我设置的值，以“0 0 50 50”巨大的图像仍四溢的页面

如果我设置为“0 0 100 100”的形象是好的价值观。

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

来源

2014-09-05 zkanoca

[** CSS-技巧SVG条**]（http://css-tricks.com/mega-list-svg-信息/） – 2014-09-05 10:01:40

具有宽度和高度值的Viewbox是如何执行缩放和使用SVG平移的。

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

在视框缩放无800个像素的宽度将等于屏

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

一切都按比例缩小上800像素的宽度，使得一个行宽1600个像素仅显示为800个像素宽。

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

放大到由600屏幕建立该部分填充整个SVG 800的底部右手四分之一，不显示上述的300条像素线或400条像素线的左侧任何东西。

来源

2014-09-05 10:03:16 Wayne

的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平面的那部分，应该实际渲染。如果你在这里选择了错误的值，你可能会看到一个空的空间。

链接：

来源

2014-09-05 10:03:32 Sirko

了解svg的viewbox属性

回答

相关问题