参考文档——权威
SVG常识
渲染顺序——后来居上:越后面的元素越可见
单位——可以指定,也可以不指定,默认px,其他:em、%、cm、mm...
SVG画布——绘制图像的区域,无限大
SVG视窗——默认300*150,视窗把画布包裹起来,在svg标签设置width和height
超过视窗的元素不可见,是因为有一个overflow: hidden
样式,可以设置overflow: visible
让超出视窗边界的内容变得可见。
SVG的坐标系和计算机绘图的坐标系一致,都是左上角为原点,X轴正方向向下,Y轴的正方向向右,单位为像素
初始坐标系
SVG包含两个坐标系:视窗坐标系和用户坐标系
-
视窗坐标系就是建立在视窗上的坐标自
-
用户坐标系是简历在SVG画布上的坐标系,也称当前坐标系
一开始完全重合!但是可以通过viewBox去改变这种默认对齐方式
viewBox
语法:viewBox ="<min-x> <min-y> <width> <height>"
min-x
和 min-y
决定了 viewBox 的左上角,width
和 height
决定了 viewBox 的宽和高。注意 width 或 height 如果设置成 0
,会禁止元素的渲染。
平移
<min-x> <min-y>
对用户坐标系进行平移
注意:可以理解为用户坐标系不动,视窗坐标系相反移动。
缩放
通过改变 width 和 height 的值可以缩放 viewBox 声明的区域。
当 viewBox 的宽高小于视窗的宽高时,相当于放大。
通过百分比和 viewBox 让 SVG 图形进行缩放
如果给视窗设置 width: 100%
和 height: 100%
,那么视窗的宽高就由它父元素的宽高决定,我们可以通过调整其父元素的宽高来放大和缩小 SVG 视窗,而不用修改 <svg>
的 width 和 height。仅仅是这样还不够,我们还需要通过 viewBox 来将 SVG 图形放大到整个视窗区域。