了解SVG的viewbox属性 [英] Understanding svg's viewbox attribute
问题描述
我正在尝试使用在这里.
我更改了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"，图像就很好.
但是我不知道它是如何工作的.
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 控制缩放./p>
您可以在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平面中应实际渲染的那部分.如果您在此处选择错误的值，则可能会看到一个空白.
链接:
I am trying to use Turkey's map which was created before here.
I have changed the dimensions of svg element
<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">
When I change viewBox values to
viewBox="0 0 200 200"
the map is rendered in smaller size.
If I set the values to "0 0 10 10" image is not displayed.
If I set the values to "0 0 50 50" a huge image comes overflowing the page
If I set the values to "0 0 100 100" image is fine.
But I don't understand how it is working.
An SVG canvas is basically an endless plain, where you can put all your objects in.
The width and height you define the size of the image as shown in the browser. This works pretty much like with any other image you can include in HTML.
With the viewBox attribute on the other hand you select the part of that plain, you currently want to view.
So with a value of "0 0 10 10" you set the upper left point of the shown image to the point 0/0 and from there select 10 units to the right and bottom for your image. In your example in those upper 10 times 10 units area there is nothing, hence you see just a transparent area, which you perceive as "not being displayed".
With a value of "0 0 50 50" the shown area gets bigger and you'll start to see the upper left corner of the picture. The first parts of the map become visible.
Finally with "0 0 100 100" you can see pretty much half of the upper map.
The area you select using viewBox is the scaled to the height and width of the SVG element. With both combined you can enabled stuff like zooming into an SVG.
You can control the scaling with the attribute preserveAspectRatio.
You can add the following code at the bottom of the SVG file and see the displayed boxes (make sure to set the viewBox="0 0 180 180" before):
<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>
So to conclude the purpose of viewBox is to select that part of the endless SVG plane, that should actually be rendered. If you choose the wrong values here, you might just see an empty space.
Links:
这篇关于了解SVG的viewbox属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
