SVG Viewport 和 viewBox

1. 画一个半径为 50 的圆:

<svg width='100', height='100'>
  <ellipse cx='50' cy='50' rx='50' ry='50' fill='#27ae60'></ellipse>
</svg>

2. 通过 width,height 设置 viewport,看到 1/4 个圆:

<svg width='50', height='50'>
  <ellipse cx='50' cy='50' rx='50' ry='50' fill='#27ae60'></ellipse>
</svg>

viewport 设置了 SVG 图像的可见区域(大小)。viewBox 可以设置 SVG 图像显示出来的起点和缩放,它的格式为:

viewBox = x y width height

3. 通过 viewBox 看到不同部位的 1/4 圆:

<svg width='50', height='50' viewBox='50 0 50 50'>
  <ellipse cx='50' cy='50' rx='50' ry='50' fill='#27ae60'></ellipse>
</svg>
<svg width='50', height='50' viewBox='50 50 50 50'>
  <ellipse cx='50' cy='50' rx='50' ry='50' fill='#27ae60'></ellipse>
</svg>
<svg width='50', height='50' viewBox='0 50 50 50'>
  <ellipse cx='50' cy='50' rx='50' ry='50' fill='#27ae60'></ellipse>
</svg>

4. 通过 viewBox 进行缩放:

<svg width='50', height='50' viewBox='0 0 100 100'>
  <ellipse cx='50' cy='50' rx='50' ry='50' fill='#27ae60'></ellipse>
</svg>
<svg width='50', height='50' viewBox='0 0 25 25'>
  <ellipse cx='50' cy='50' rx='50' ry='50' fill='#27ae60'></ellipse>
</svg>
<svg width='50', height='50' viewBox='0 0 75 75'>
  <ellipse cx='50' cy='50' rx='50' ry='50' fill='#27ae60'></ellipse>
</svg>
<svg width='50', height='50' viewBox='50 50 100 100'>
  <ellipse cx='50' cy='50' rx='50' ry='50' fill='#27ae60'></ellipse>
</svg>

京ICP备12052177号-1