您的位置:首页> HTML5教程> SVG教程

SVG viewbox 与 preserveAspectRatio

2018-8-10 00:06| 作者: admin| 查看: 2022| 评论: 0|来自: 蚂蚁部落

默认情况下,用户坐标系统和视窗坐标系统重合,具体参阅SVG 坐标系统一章节。

transform属性可以创建新的当前用户坐标系统,具体参阅以下两篇文章:

(1).SVG transform 用法一章节。

(2).SVG transform 变换深入理解一章节。

一.viewbox属性:

此属性也可以创建新的当前用户坐标系统,下面通过代码实例做一下详细介绍。

首先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
* {
  margin:0px;
  padding:0px;
}
svg {
  border:1px solid blue;
  width:300px;
  height:150px;
  margin:50px;
  overflow:visible;
}
</style>
</head>
<body>
  <svg viewBox="0 0 150 75">
    <rect
      x="10" y="5"
      width="20" height="20"
      fill="blue" />
  </svg>                     
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/25/175224lgkadhk4jkvkajv5.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

创建一个宽高分别为20px的矩形,然而实际表现是尺寸明显大于20px。

之所以出现上面现象,是viewBox属性的原因。

语法结构:

[XML] 纯文本查看 复制代码
viewBox="<min-x>, <min-y>, <width>, <height>"

参数解析:

(1).<min-x>与<min-y>:规定viewBox的左上角左上角的坐标。

(2).<width>与<height>:规定viewBox的尺寸。

特别说明:参数之间可以用逗号分隔,也可以用空格分隔。

上面的概念阐述并不直观,不利于理解,不用担心,下面会分步通过代码实例进行介绍。

如果不使用viewBox属性,那么上述代码的表现如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/25/175303m0q5mgzzhf7a5m7a.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

viewBox属性值四个参数可以绘制出一个矩形框,暂且称之为"视框",模拟如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/25/175314t8wjg8llf93l88gt.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通过viewBox属性定义一个矩形视框,它会通过缩放填充满整个元素。

缩放填充过程用如下代码模拟:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html><html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  border:1px solid blue;
  width:300px;
  height:150px;
  overflow:visible;
}
#rect{
  animation:rect 2s forwards; 
}
@keyframes rect{ 
  from {
    transform:scale(1)
  } 
  to {
    transform:scale(2)
  } 
} 
#box{
  animation:box 2s forwards; 
}
@keyframes box{ 
  from {
    width:150px;
    height:75px;
  } 
  to {
     width:300px;
    height:150px;
  } 
}
</style>
</head>
<body>
  <svg>
    <rect id="rect"
      x="10" y="5"
      width="20" height="20"
      fill="blue" />
  
    <rect id="box"
      x="0" y="0"
      width="150"
      height="75"
      fill="none"
      stroke="red" />
  </svg>                     
</body>
</html>

通过CSS3模拟视框缩放效果,演示了为什么视框中绘制的元素比它所规定的尺寸要大的原因。

规定视框的尺寸是所在元素尺寸的一半,所以在其中绘制的矩形的尺寸是所规定尺寸的两倍。

实质是通过"视框"进行适当的矩阵变换以适应指定区域的边界(通常是视窗):

(1).<min-x>与<min-y>规定transform:translate()变换。

(2).<width>与<height>规定transform:scale()变换。

前面代码,viewBox属性值前两个参数都是0,所以进行的是transform:scale(2)缩放变换。

再来看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  border: 1px solid blue;
  width: 300px;
  height: 150px;
  overflow: visible;
}
</style>
</head>
<body>
  <svg viewBox="-10 -10 200 100">
    <rect
      x="10" y="5"
      width="20" height="20"
      fill="blue" />
  </svg>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/25/175353zoioizre1j2jzf1r.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

viewBox属性值前两个参数值设置为-10,下面看此效果原理动画演示:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  border: 1px solid blue;
  width: 300px;
  height: 150px;
  overflow: visible;
}
#rect{
  animation:rect 4s forwards; 
}
@keyframes rect{ 
  0% {
    transform:translate(0,0) scale(1)
  }
  50% {
    transform:translate(10px,10px) scale(1);
  }
  100% {
    transform:translate(10px,10px) scale(2);
  } 
} 
#box{
  animation:box 4s forwards; 
}
@keyframes box{ 
  0% {
    transform:translate(0,0)
  }  
  50% {
    transform:translate(10px,10px);
    width:150px;
    height:75px;
  }
  100% {
    transform:translate(10px,10px);
    width:300px;
    height:150px;
  } 
}
</style>
</head>
<body>
  <svg>
    <rect id="rect"
      x="10" y="5"
      width="20" height="20"
      fill="blue" />
    <rect id="box"
      x="-10" y="-10"
      width="150" height="75"
      fill="none"
      stroke="red"/>
  </svg>
</body>
</html>

通俗的讲,可以认为viewBox创建一个放置于画布上的框,一些图案位于此框中,然后移动这个框(框中的图案会跟随移动),让框的左上角与视窗的左上角对齐,然后进行缩放操作。总之,viewBox创建一个新的用户坐标系,应用此属性的元素的后代会在这个新的用户坐标系中定位和确定尺寸,而不是初始坐标系。

二.preserveAspectRatio属性:

上面代码,viewBox创建"视框"的尺寸和SVG视窗等比例,能够恰好缩放填满视窗。

实际应用中,总有比例不相等的情况,此时,preserveAspectRa属性的作用得以体现。

语法结构:

[XML] 纯文本查看 复制代码
preserveAspectRatio = defer? <align> <meetOrSlice>?

defer参数可选,只有在<image>应用preserveAspectRatio才被用到,不是本文关键,暂且不管。

参数解析:

(1).align:规定viewBox如何与SVG viewport对齐方式。

(2).meetOrSlice:可选,规定如何维持高宽比。

先看一个简单的代码片段:

[XML] 纯文本查看 复制代码
preserveAspectRatio="xMidYMid meet"

从xMidYMid(默认值)可以看出,对齐方式需要横向和纵向共同完成。

分解如下:

(1).xMin:viewport和viewBox左边对齐。

(2).xMid:viewport和viewBox x轴中心对齐。

(3).xMax:viewport和viewBox右边对齐。

(4).YMin:viewport和viewBox上边缘对齐。

(5).YMid:viewport和viewBox y轴中心点对齐。

(6).YMax:viewport和viewBox下边缘对齐。

特别说明:注意大小写,和驼峰命名规则相同。

再来看meetOrSlice参数:

(1).meet:默认值,保持纵横比缩放viewBox适应viewport。

(2).slice:保持纵横比同时比例小的方向放大填满viewport。

(3).none:扭曲纵横比以充分适应viewport。

这应该是很好理解的,看一个简单的代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  border: 1px solid blue;
  width: 400px;
  height: 200px;
  overflow: visible;
}
</style>
</head>
<body>
  <svg viewBox="0 0 200 50" preserveAspectRatio="xMinYMin meet">
    <rect
      x="0" y="0"
      width="200" height="50"
      fill="blue" />
  </svg>
</body>
</html>

为了便于观察出效果,将rect尺寸与viewBox尺寸设置为相同。

xMinYMin表示视框与视窗左上对齐,meet表示保持纵横比例进行缩放,只要横向或者纵向填充满视窗即可。

再来看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  border: 1px solid blue;
  width: 400px;
  height: 200px;
  overflow: visible;
}
</style>
</head>
<body>
  <svg viewBox="0 0 200 50" preserveAspectRatio="xMinYMin slice">
    <rect
      x="0" y="0"
      width="200" height="50"
      fill="blue" />
  </svg>
</body>
</html>

slice表示保持纵横比例进行缩放,但是需要比例小的方向放大填满viewport。

其他属性就不挨个演示了,比较简单,大家自行测试即可。


鲜花

握手

雷人

路过

鸡蛋
返回顶部