如何使用<svg> viewBox属性？

Question

我正在从官方文件中学习svg，有这样的说法。我不明白，如果它已经具有widthand height属性，那么再次指定它又有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">

Answer 1

宽度和高度是多少<svg>。viewBox控制其内容的显示方式，因此viewBox =“ 0 0 1500 1000”会将<svg>元素的内容按比例缩小5（1500/300 = 5和1000/200 = 5），并且内容将为1 / 5没有viewBox时的大小，但是<svg>假设您有一个弹性表面，并将其切成4个相等的部分。如果扔掉3块，则表面的大小是原始表面的1/4。如果现在拉伸表面并使其大小与原始表面相同，则该表面上的所有内容都会是该尺寸的两倍。这就是viewBox和width / height关联的方式。

Answer 2

如果不指定视区，则元素中所有无单位的数字均假定为像素。（并且SVG假设将90 dpi或每英寸的像素从厘米等单位转换为像素。）一个视图框使您可以在元素中使无单位数字表示“用户单位”，并指定如何将这些单位映射到大小。为简单起见，仅考虑x坐标，即标尺。您的视图框显示标尺将具有1500个单位，以匹配svg的200像素大小宽度。从0到1500（无单位，即用户单位）的线元素将拉伸200像素，如图所示，即横跨svg绘图的宽度。（并且由于SVG可伸缩且不会降低分辨率，因此当用户放大或缩小像素时，像素在现实世界中的意义并不大。）它是一种坐标转换。我建议您从类似“ SVG Essentials”的书中学习，大约要用10美元，我从中大致引用了这个答案。

Answer 3

默认情况下<svg width="300" height="200">svg网格的“标尺”以像素为单位（该svg中的所有形状均以像素为单位）但是您想使用自己的单位，可以使用viewBox attr：<svg width="300" height="200" viewBox="0 0 1500 1000">这意味着：水平轴： 1500（您的宽度单位）= 300px => 1（您的宽度单位）= 300 / 1500px = 1 / 5px垂直轴： 1000（您的身高单位）= 200px => 1（您的身高单位）= 200 / 1000px = 1 / 5px现在，svg中的所有形状都会缩放：与原点相比，它们的宽度缩小到1 / 5px（缩小1/5 <1 =>）。与原点相比，它们的高度也缩放为1 / 5px（1/5 <1 =>缩小）