SVG世界、视野、视窗

1、SVG的世界、视野、视窗的概念

  1. 世界是无穷大的,
  2. 视野是观察世界的一个矩形区域
  3. 视窗是在浏览器上渲染SVG图像的区域

具体到代码是

  1. SVG代码定义世界
  2. viewBox, preserveAspectRatio控制视野
  3. width, height控制视窗


width和height

定义了视窗的大小。视窗就是svg在浏览器上显示的宽高

viewBox

参数1,2:视野在世界坐标系中的坐标x, y
参数3,4:视野的宽和高

preserveAspectRatio参数

  1. align
  • none
  • xMinYMin
  • xMinYMax
    ...
  1. meetOrSlice
  • meet 视窗能看见整个视野,如果视窗viewbox和svg比例不一样,就会出现空白
SVG世界、视野、视窗_第1张图片
在xMidYMid情况下,选择meet;红框是视窗viewbox,绿框是视野
  • slice 视野填满视窗,所以视窗可能只看到视野的一部分
SVG世界、视野、视窗_第2张图片
在xMidYMid情况下,选择slice;红框是视窗viewbox,绿框是视野

你可能感兴趣的:(SVG世界、视野、视窗)