HTML5 可缩放矢量图形（2）—SVG基础

参考文档——权威

SVG常识

渲染顺序——后来居上：越后面的元素越可见

单位——可以指定，也可以不指定，默认px，其他：em、%、cm、mm...

SVG画布——绘制图像的区域，无限大

SVG视窗——默认300*150，视窗把画布包裹起来，在svg标签设置width和height

超过视窗的元素不可见，是因为有一个overflow: hidden 样式，可以设置overflow: visible 让超出视窗边界的内容变得可见。

SVG坐标系统

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 图形放大到整个视窗区域。