如何使用< svg> viewBox属性? [英] How to use the <svg> viewBox attribute?

问题描述

我正在从svg的正式文件中学习，有这样的说法.我不明白，如果它已经具有width和height属性，在viewBox="0 0 1500 1000"中再次指定它又有什么意义呢? 据说，一个px单位被定义为等于一个用户单位.因此，"5px"的长度与官方文档中的"5"的长度相同，因此此viewBox的宽度为1500px， 1000高度视图，超过300像素和200像素.那么为什么要首先定义width和height值呢?

I am learning svg from its official documents, there is such line. I don't get it, if it already has a width and height attribute, what is the point to specify it again in viewBox="0 0 1500 1000" ? It is says, "One px unit is defined to be equal to one user unit. Thus, a length of "5px" is the same as a length of "5"" in the official docs, thus this viewBox is a 1500px wide and 1000 height view, which exceeds 300px and 200px. So why does it define the width and height value in the first place?

 <svg width="300px" height="200px" version="1.1"
         viewBox="0 0 1500 1000" preserveAspectRatio="none"
         xmlns="http://www.w3.org/2000/svg">

推荐答案

<svg>的宽度和高度是多少. viewBox控制其内容的显示方式，因此viewBox ="0 0 1500 1000"将<svg>元素的内容按5的比例缩小(1500/300 = 5和1000/200 = 5)，并且内容将是没有viewBox但<svg>

The width and height are how big the <svg> is. The viewBox controls how its contents are displayed so the viewBox="0 0 1500 1000" will scale down the contents of <svg> element by a factor of 5 (1500 / 300 = 5 and 1000 / 200 = 5) and the contents will be 1/5 the size they would be without the viewBox but the <svg>

想象一下，您有一个弹性的表面并将其切成4个相等的部分.如果扔掉3块，则表面的大小是原始表面的1/4.如果现在拉伸表面并使其大小与原始表面相同，则该表面上的所有内容都会是该尺寸的两倍.这就是viewBox和width/height关联的方式.

Imagine you have an elastic surface and cut it into 4 equal pieces. If you throw 3 pieces away you've got a surface that's 1/4 the size of the original surface. If you now stretch the surface and make it the same size as the original surface then everything on the surface will be twice the size. That's how viewBox and width/height are related.

这篇关于如何使用< svg> viewBox属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！