我正在从其官方文件中学习svg,有这样的路线 . 我没有得到它,如果它已经有 width
和 height
属性,那么在 viewBox="0 0 1500 1000"
中再次指定它的重点是什么?在官方文档中说,"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“”,因此这个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">
3 回答
如果未指定视图框,则假定元素中的所有无单位数字都是像素 . (并且SVG假定从dcm到像素的单位转换为90 dpi或每英寸像素 . )
使用视图框可以使元素中的无单位数字表示“用户单位”,并指定这些单位如何映射到该大小 . 为简单起见,只考虑x坐标,即标尺 . 您的视图框表示您的标尺将有1500个单位来匹配svg的200像素大小宽度 .
从0到1500的线元素(无单位,即用户单位)将绘制200个像素,即跨越svg绘图的宽度 .
(并且由于SVG可以在不损失分辨率的情况下进行扩展,因此当用户放大或缩小时,像素在现实世界中并没有多大意义 . )
它是一种坐标变换,各种各样 .
我建议你从像“SVG Essentials”这样的书中学习,大约10美元,我从中粗略地引用了这个答案 .
宽度和高度是
<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相关的方式 .
默认情况下
svg网格的“标尺”是像素(svg中的所有形状都是以像素为单位测量的)
但是你想使用自己的单位,你可以使用viewBox attr:
这意味着:
horizontal axis: 1500(您的宽度单位)= 300px => 1(您的宽度单位)= 300 / 1500px = 1 / 5px
vertical axis: 1000(你的身高单位)= 200px => 1(你的身高单位)= 200 / 1000px = 1 / 5px
与原点相比,它们的宽度缩放到1 / 5px(1/5 <1 =>缩小) .
与原点相比,它们的高度也可以缩放到1 / 5px(1/5 <1 =>缩小)