【CSS】SVG（五）——viewbox

这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战

SVG（五）-viewbox

（7）视图属性

SVG中提供了viewBox和preserveAspectRatio属性来控制视野。

（7.1）viewBox

• 语法：viewBox = "x1 y1 width height"

  • (x1,y1)表示视窗左上角起点
  • width height表示视窗的宽高
    • 或者也可以将其当作(x1+width,y1+width)，即右下角坐标

• 这个属性可以理解为：视窗大小

  • 视窗越大，则可视图越小；视窗越小，则可视图越大

  视窗越大，表示你离这个形状越远，视线越远，则看到的物体越小，所以可视区域就会变小；

  视窗越小，则表示离这个形状越近，视线越近，则看到的物体越大，所以可视区域就会变大；

  • 或者理解为截屏区域
    • 从整个视图区域中截取某一个区域，然后将这个截取的区域放大至整个视图区域

• 代码示例：

  <svg>
      <path d="M 100 50, L 50 100, L 100 150, L 150 100, L 100 50, L 75 100, L 100 125, L 125 100, Z"/>
  </svg>
  

  • 初始形状：

    

    红色区域为整个<svg>区域

  • 如果我们设置视窗属性为0 0 200 200，表示将形状所在的<svg>矢量图区域的(0,0)、(200,200)这个矩形区域作为可视区域，其内部的所有内容将会放大至整个<svg>区域，而这个矩形区域之外的内容将不可见

    <svg viewBox="0 0 200 200">
        <path d="M 100 50, L 50 100, L 100 150, L 150 100, L 100 50, L 75 100, L 100 125, L 125 100, Z"/>
    </svg>
    

    

    相当于从(0,0)到(200+0,200+0)作截图区域，然后将<svg>区域放大至这个截图区域

    

    

  • 这次设置部分区域可见，将视图区域控制在(0 0 100 100)

    <svg viewBox="0 0 100 100">
        <path d="M 100 50, L 50 100, L 100 150, L 150 100, L 100 50, L 75 100, L 100 125, L 125 100, Z"/>
    </svg>
    

    

    • 最终效果：

      

  • 如果设置的视图区域与原来的<svg>区域的形状不一样，如(0 0 100 200)，或者(0 0 200 100)

    • 那么视窗将会用到这个属性preserveAspectRatio

  ---