svg viewBox属性
我正在从它的官方文档中学习svg，有这样的路线。 我不明白，如果它已经有一个width和height属性，在viewBox="0 0 1500 1000"再次指定它有viewBox="0 0 1500 1000" ？ 据说“一个px单位被定义为等于一个用户单位，因此官方文档中”5px“的长度等于”5“的长度，因此该viewBox是1500px宽， 1000高度视图，超过300px和200px。 那么为什么它首先定义了宽度和高度值呢？
<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> 1/5
想象一下，你有一个弹性的表面，并把它切成4等份。 如果你扔掉3件，你的表面就是原来表面的1/4。 如果您现在将表面拉伸并使其与原始表面的尺寸相同，则表面上的所有东西都将是尺寸的两倍。 这就是viewBox和width / height的关系。
如果不指定视图框，则将元素中的所有无单位数字假定为像素。 （而SVG则假设每厘米像素为90厘米或像素，用于从厘米到像素等单位的转换。）
一个viewbox可以让你在元素中表示无用的数字，意思是“用户单位”，并指定这些单位如何映射到这个大小。 为了简单起见，只考虑x坐标，即尺子。 你的viewbox说你的尺子将有1500个单位来匹配svg的200像素尺寸宽度。
从0到1500（无单位，即用户单位）的线元素将拉伸200个像素，也就是跨越svggraphics的宽度。
（而且由于SVG可以在不降低分辨率的情况下进行扩展，所以当用户放大或缩小时，像素在真实世界中的意义并不大。）
它是一种坐标转换。
我build议你从一本像“SVG Essentials”这样的书中学习，大概使用10美元，我从中粗略地引用了这个答案。
