菜单

【金沙国际】领悟SVG坐标系和更换:视窗,viewBox和preserveAspectRatio

2019年3月9日 - 金沙前端

xMaxYMid

单位       最终说一下单位,任何坐标和尺寸都足以带和不带单位。
  不带单位的境况

倾斜 – skew transform还匡助倾斜变换,能够是沿着x轴的(左右歪斜,正角度为向右倾斜,其实是倾斜了y轴),也许是沿着y轴的(上下倾斜,正角度为向下倾斜,其实是倾斜了x轴)倾斜;该变换供给传入八个角度参数,这些角度参数会操纵倾斜的角度。看下边包车型客车事例:

例如:

xMidYMid (默认值)

变换链      
transform属性扶助设置多个转移,那个变换只要中间用空格分开,然后一并放到属性中就能够了。执行职能跟按梯次独立执行那些变换是同一的。

下图诠释了各个填充的成效:

效果:

交互演示

要理解viewport, viewBox,
以及分裂的preserveAspectRatio值是怎么做事的最好法子是可视化的以身作则。

鉴于那个目标,作者创建了2个简练的互动演示,你能够更改那几个属性的值来查阅新值导致的结果。金沙国际 1

在线案例

本人盼望那篇小说在扶助您了然SVG viewport, viewBox,
和 preserveAspectRatio 内容时有效用。若是你想要明白越多关于SVG坐标系的情节,例如嵌套坐标系,建立三个新的坐标系以及SVG中的变换,继续读书这一种类接下去的一对。多谢你的开卷!

2 赞 1 收藏
评论

金沙国际 2

     
如若最外层的SVG元素的width和height没有点名单位(也正是”用户单位”),则那几个值会被认为单位是px。

代码如下:

4.
transform属性

开班坐标系

初始视窗坐标系是三个建立在视窗上的坐标系。原点(0,0)在视窗的左上角,X轴正向指向右,Y轴正向指向下,伊始坐标系中的1个单位等于视窗中的二个”像素”。这些坐标种类类似于通过CSS盒模型在HTML元素上建立的坐标系。

初始用户坐标系是赤手空拳在SVG画布上的坐标系。那几个坐标系一开端和视窗坐标系完全一致-它本身的原点位于视窗左上角,x轴正向指向右,y轴正向指向下。使用viewBox性情,早先用户坐标种类-也称最近坐标系,或选用中的用户空间-能够变成与视窗坐标系不均等的坐标系。大家在一下节中商量什么改变坐标系。

到后日甘休,我们还尚未评释viewBox属性值。SVG画布的用户坐标种类和视窗坐标种类完全一致。

下图中,视窗坐标系的”标尺”是铅色的,用户坐标系(viewBox)的是藤黄的。由于它们在这几个时候完全相同,所以五个坐标连串重合了。金沙国际 3

上边SVG中的鹦鹉的外框边界是200个单位(那些事例中是200个像素)宽和300个单位高。鹦鹉基于起先坐标系在画布中绘制。

新用户空间(即,新当前坐标系)也得以经过在容器成分或图表成分上利用transform性子来声称变换。大家将在那篇作品的第③局地谈论有关变换的始末,越多细节在第2部分和结底部分中研讨。

<g transform=”translate(-10,-20) scale(2) rotate(45) translate(5,10)”>
  <!– graphics elements go here –>
</g>

SVG的视窗地点一般是由CSS内定,尺寸由SVG成分的性质width和height设置,然而假设SVG是储存在embedded对象中(例如object成分,可能其余SVG成分),而且含有SVG的文档是用CSS恐怕XSL格式化的,并且那一个外围对象的CSS可能其余钦定尺寸的值已经得以测算出视窗的尺码了,则此时会使用外围对象的尺寸。

金沙国际 4 

SVG画布

canvas是绘制SVG内容的一块空间或区域。理论上,画布在装有维度上都以最好的。所以SVG可以是任意尺寸。但是,SVG通过零星区域表以往荧屏上,那么些区域叫做viewport。SVGChinese Football Association Super League出视窗边界的区域会被裁切并且隐藏。

 

代码如下:

画布

preserveAspectRatio语法

preserveAspectRatio的官方语法是:

JavaScript

preserveAspectRatio = defer? <align> <meetOrSlice>?

1
preserveAspectRatio = defer? <align> <meetOrSlice>?

它在任何建立新viewport的因素上都使得(我们会在这几个连串的下一部分斟酌那个标题)。

defer注明是可选的,并且唯有当您在<image>上添加preserveAspectRatio才被用到。用在别的其余因素上时它都会被忽略。<images>本身不在那篇文章的探究范围,大家一时半刻跳过defer那些选项。

align参数证明是不是强制统一放缩,借使是,对齐方法会在viewBox的宽高比不相符viewport的宽高比的景况下生效。

如果align值设为none,例如:

JavaScript

preserveAspectRatio = “none”

1
preserveAspectRatio = "none"

图形不在保持宽高比而会缩放来适应视窗,像我们在上头八个例证中看看的那么。

别的兼具preserveAspectRatio值都在维系viewBox的宽高比的图景下强制拉伸,并且内定在视窗内怎么对齐viewBox。大家会简单介绍align的值。

最后2脾性能,meetOrSlice也是可选的,私下认可值为meet。那么些个性注解整个viewBox在视窗中是不是可知。假诺是,它和align参数通过一个或多个空格分隔。例如:

JavaScript

preserveAspectRatio = “xMinYMin slice”

1
preserveAspectRatio = "xMinYMin slice"

这个值第壹立刻起来只怕很目生。为了让它们更便于理解和纯熟,你能够把meetOrSlice的值类比于background-sizecontaincover值;它们卓殊接近。meet类似于containslice类似于cover。上边是种种值的概念和含义:

<g transform=”translate(-10,-20)”>
  <g transform=”scale(2)”>
    <g transform=”rotate(45)”>
      <g transform=”translate(5,10)”>
        <!– graphics elements go here –>
      </g>
    </g>
  </g>
</g>

富有的能成立四个视窗的要素(看下一节),再添加marker,pattern,view成分,都有3个viewBox属性。

1. 坐标变换定义

viewBox语法

viewBox属性接收八个参数值,包罗:<min-x>, <min-y>, width 和 height

CSS

viewBox = <min-x> <min-y> <width> <height>

1
viewBox = <min-x> <min-y> <width> <height>

<min-x> 和 <min-y> 值决定viewBox的左上角,widthheight操纵视窗的宽高。这里要留心视窗的宽高不肯定和父<svg>要素的宽高一样。<width><height>值为负数是违规的。值为0的话会禁止成分的渲染。

专注视窗的增加率也可以在CSS中安装为别的值。例如:设置width:100%会让SVG视窗在文书档案中自适应。无论viewBox的值是有个别,它会炫耀为外层SVG成分计算出的涨幅值。

设置viewBox的事例如下:

<!– The viewBox in this example is equal to the viewport, but it can
be different –> <svg width=”800″ height=”600″ viewBox=”0 0 800
600″> <!– SVG content drawn onto the SVG canvas –>
</svg>

1
2
3
4
<!– The viewBox in this example is equal to the viewport, but it can be different –>
<svg width="800" height="600" viewBox="0 0 800 600">
    <!– SVG content drawn onto the SVG canvas –>
</svg>

如若你前面在其余地方来看过viewBox,你或者会合到一些诠释说您可以用viewBox天性通过缩放只怕变更使SVG图形变换。这是真的。笔者将深切研讨并且告诉你居然可以运用viewBox来切割SVG图形。

理解viewBox和视窗之间差距最好的办法是亲自阅览。所以让我们看有些例子。大家将从viewBox和viewport的宽高比相同的例证开首,所以大家还不需求深切精晓preserveAspectRatio

保持缩放的比重 – preserveAspectRatio属性      
有个别时候,越发是当使用viewBox的时候,大家盼望图形占据整个视窗,而不是多少个样子上按相同的比重缩放。而有点时候,大家却是希望图形多个方向是遵守稳定的百分比缩放的。使用品质preserveAspectRatio就能够直达控制这一个的目标。
     
那么些本性是享有能树立1个新视窗的因素,再拉长image,marker,pattern,view成分都有的。而且preserveAspectRatio属性唯有在该因素设置了viewBox今后才会起效果。假设没有设置viewBox,则preserveAspectRatio属性会被忽视。
      属性的语法如下:preserveAspectRatio=”[defer] <align>
[<meetOrSlice>]”
专注三个参数之间须求采用空格隔绝。
defer:可选参数,只对image成分有效,假诺image成分中preserveAspectRatio属性的值以”defer”初叶,则意味着image成分使用引用图片的缩放比例,假如被引用的图片并未缩放比例,则忽略”defer”。全数别的的因素都忽略那些字符串。
align:该参数决定了联合缩放的对齐方式,可以取下列值:
  none – 不强制统一缩放,那样图形能完整填充整个viewport。
  xMinYMin –
强制统一缩放,并且把view博克斯中设置的<min-x>和<min-y>对齐到viewport的微乎其微X值和Y值处。
  xMidYMin –
强制统一缩放,并且把vivewBox中X方向上的中式点心对齐到viewport的X方向中部处,简言之正是X方向中点对齐,Y方向与地方一样。
  xMaxYMin – 强制统一缩放,并且把viewBox中安装的<min-x> +
<width>对齐到viewport的X值最大处。
 
类似的还有任何项指标值:xMinYMid,xMidYMid,x马克斯YMid,xMinYMax,xMidY马克斯,xMaxY马克斯。那么些整合的含义与地点的两种情景相近。
meetOrSlice:可选参数,能够去下列值:
  meet – 默许值,统一缩放图形,让图形全体来得在viewport中。
  slice – 统一缩放图形,让图形充满viewport,超出的有些被剪裁掉。

咀嚼上面两种代码绘出的结果的分裂:

 

slice

在保持宽高比的景观下,缩放图形直到viewBox覆盖了整整视窗区域。viewBox被缩放到正好覆盖视窗区域(在七个维度上),不过它不会缩舍弃刘宇出那一个界定的部分。换而言之,它缩放到viewBox的宽高能够正好完全覆盖视窗。

在那种气象下,假使viewBox的宽高比不合乎视窗,一部分viewBox会扩充超过视窗边界(即,viewBox制图的区域会比视窗大)。那会促成有的viewBox被切片。

你能够把这几个类比为background-size: cover。在背景图片的气象中,图片在保持本人宽高比(怎么着)的景色下缩放到宽高可以完全覆盖背景定位区域的小小尺寸。

所以,meetOrSlice被用来声称viewBox是不是会被统统包涵在视窗中,可能它是或不是应该尽量缩放来覆盖全体视窗,甚至表示部分的viewBox会被“slice”。

比如说,如若大家注解viewBox的尺码为200*300,并且应用了meetslice值,保持align值为浏览器暗中认可,每一种值的结果会看起来如下:金沙国际 5

align参数使用玖个值中的三个依旧为none。任何除none之外的值都用于保证宽高比缩放图片,并且还用来在视窗中对齐viewBox

当使用百分比率时,align值类似于background-position。你能够把viewBox当做背景图像。通过align定位和background-position的例外在于,区别于通过3个与视窗相关的点来声称3个特定的viewBox值,它把具体的viewBox“轴”和呼应的视窗的“轴”对齐。

为了精晓每一个align值的意义,大家将率先介绍每三个“轴”。

还记得viewBox<min-x><min-y>值吗?我们将运用它们来定义viewBox中的”min-x”和”min-y”轴。此外,大家将概念多个轴“max-x”和”max-y“,各自通过<min-x> + <width> 和 <min-y> + <height>来稳定。最终,大家定义多少个轴”mid-x”和”mid-y”,依据<min-x> + (<width>/2) 和 <min-y> + (<height>/2)来定位。

那样做是还是不是让事情更扑朔迷离了啊?要是是这样,让我们看一下下边包车型大巴图样来看一下每一种轴代表了怎么样。在那张图片中,<min-x>和 <min-y>值都设置为0。viewBox被安装为viewBox = "0 0 300 300"金沙国际 6

地点图片中的品红虚线代表视窗的mid-xmid-y轴。我们将对它们赋一些值来对齐viewBoxmid-xmid-y轴。对于视窗,min-x的值等于0min-y值约等于0max-x值等于viewBox的宽度,max-y的值等于中度,mid-xmid-y意味着了大幅度和中度的中间值。

对齐的取值包含:

视窗变换 – viewBox属性

保险缩放的比重 – preserveAspectRatio属性 有点时候,尤其是当使用viewBox的时候,大家意在图形占据整个视窗,而不是多个趋势上按相同的比例缩放。而有个别时候,大家却是希望图形三个样子是比照一定的比重缩放的。使用品质preserveAspectRatio就能够完毕控制那些的目标。
那天性格是独具能创制一个新视窗的成分,再增进image,marker,pattern,view成分都有的。而且preserveAspectRatio属性唯有在该因素设置了viewBox以往才会起效果。借使没有安装viewBox,则preserveAspectRatio属性会被忽视。
个性的语法如下:preserveAspectRatio=”[defer] <align>
[<meetOrSlice>]”
留神贰个参数之间须要使用空格隔断。
defer:可选参数,只对image成分有效,尽管image成分中preserveAspectRatio属性的值以”defer”伊始,则意味着image成分使用引用图片的缩放比例,就算被引用的图形并未缩放比例,则忽略”defer”。全数别的的成分都忽略那个字符串。
align:该参数决定了合并缩放的对齐情势,能够取下列值:
  none – 不强制统一缩放,那样图形能全体填充整个viewport。
  xMinYMin –
强制统一缩放,并且把viewBox中装置的<min-x>和<min-y>对齐到viewport的微乎其微X值和Y值处。
  xMidYMin –
强制统一缩放,并且把vivewBox中X方向上的中式点心对齐到viewport的X方向中心处,简言之正是X方向中式点心对齐,Y方向与地点一样。
  x马克斯YMin – 强制统一缩放,并且把viewBox中设置的<min-x> +
<width>对齐到viewport的X值最大处。
 
类似的还有任何类别的值:xMinYMid,xMidYMid,x马克斯YMid,xMinY马克斯,xMidY马克斯,x马克斯YMax。这个组合的意义与地方的三种状态类似。
meetOrSlice:可选参数,能够去下列值:
  meet – 暗中认可值,统一缩放图形,让图形全体呈现在viewport中。
  slice – 统一缩放图形,让图形充满viewport,超出的一部分被剪开除。

  1. 自个儿坐标系(Current Coordinate)

xMinYMax

 

平移 – translate 平移变换把相关的坐标值平移到钦点的岗位,该变换供给传入四个轴上移步的量。看例子:

SVG中的图形分组

精通SVG坐标系和转移:视窗,viewBox和preserveAspectRatio

2015/09/23 · HTML5 ·
SVG

原稿出处:
SaraSoueidan   译文出处:Blueed(@Ivan_z3)   

SVG成分不像HTML成分一样由CSS盒模型管理。那使得我们能够更进一步灵敏定位和更换这几个因素-恐怕一眼看上去不太直观。可是,一旦你明白了SVG坐标系和转移,操纵SVG会很是简单并且很有意义。本篇小说中大家将研究决定SVG坐标系的最注重的多个性子:viewport, viewBox
和 preserveAspectRatio

那是本体系三篇小说中的第三篇,那篇小说探讨SVG中的坐标系和转移。

为了使文中的始末和说明更形象化,作者创制了2个并行演示,你能够轻易更改viewBox 和 preserveAspectRatio的值。

在线案例

其一例子只是注重内容的一小部分,所以看完请回来继续读书这篇小说

      那里需求区分视窗,视窗坐标系,用户坐标系的定义:

代码如下:

金沙国际 7

xMidYMax

     
私下认可景况下,视窗坐标系与用户坐标系是重合的,不过那里需求留意,视窗坐标系属于的是创设视窗的要素,视窗坐标系鲜明好之后,整个视窗的坐标基调就规定了。但是用户坐标系是属于各类图形元素的,只要图形进行了坐标变换,就会创制新的用户坐标系,这些因素中兼有的坐标和尺寸都采纳这几个新的用户坐标系。

在平常工作中,我们经常索要达成的二个职务正是缩放一组图片,让它适应它的父容器。我们得以因而安装view博克斯属性达到那一个指标。

参数 描述
x 左上角横坐标
y 左上角纵坐标
width 宽度
height 高度

xMinYMid

      那几个事例会来得一个筋斗45度的矩形。有几点注意:
1.这里的转换是以角度值为参数的。
2.旋转指的是对峙于x轴的转动。
3.旋转是环绕用户坐标系的原点(0,0)展开的。

用户坐标系的更换 – transform属性 该项目变换是因而设置元素的transform属性来钦定的。那里要求留意,transform属性设置的因素的变换,只影响该因素及其子成分,与其他成分非亲非故,不影响别的成分。

改换矩阵(Matrix),记为M

viewBox

小编欣赏把viewBox知晓为“真实”坐标系。首先,它是用来把SVG图形绘制到画布上的坐标系。那些坐标系能够高于视窗也足以低于视窗,在视窗中能够完全可知或一些可知。

在事先的章节里,这一个坐标系-用户坐标系-和视窗坐标系完全等同。因为我们并未把它注解成任何坐标系。那正是干吗全数的定点和制图看起来是根据视窗坐标系的。因为大家只要创造视窗坐标系(使用widthheight),浏览器暗中同意创设二个完全相同的用户坐标系。

您能够选择viewBox质量注脚本身的用户坐标系。要是你挑选的用户坐标连串和视窗坐标种类宽高比(高比宽)相同,它会延长来适应整个视窗区域(一分钟内我们就来讲个例子)。然则,假若您的用户坐标系宽高比分裂,你能够用preserveAspectRatio质量来声称整个系统在视窗内是不是可知,你也足以用它来声称在视窗中怎么着稳定。大家会在下个章节里研究本场地包车型客车细节和例子。在这一章里,大家只谈谈viewBox的宽高比符合视窗的状态-在这一个事例中,preserveAspectRatio不发生潜移默化。

在大家谈谈这个事例前,大家回顾一下viewBox的语法。

金沙国际 8

1 0 tx
0 1 ty
0 0 1

meetOrSlice参数指明viewbox的缩放形式。

视窗

视窗是一块SVG可知的区域。你能够把视窗当做2个窗户,透过那一个窗户可以看到特定的情景,景观恐怕完全,大概唯有一部分。

SVG的视窗类似访问当前页面包车型大巴浏览器视窗。网页能够是此外尺寸;它能够高于视窗宽度,并且在多数意况下都比视窗高度要高。不过,每种时刻只有一对网页内容是由此视窗可知的。

万事SVG画布可知照旧某些可知取决于这么些canvas的尺寸以及preserveAspectRatio属性值。你将来不必要担心这几个;大家随后会谈谈更多的底细。

您能够在最外层<svg>要素上采纳widthheight质量注脚视窗尺寸。

<!– the viewport will be 800px by 600px –> <svg width=”800″
height=”600″> <!– SVG content drawn onto the SVG canvas –>
</svg>

1
2
3
4
<!– the viewport will be 800px by 600px –>
<svg width="800" height="600">
    <!– SVG content drawn onto the SVG canvas –>
</svg>

在SVG中,值能够带单位也无法不带。二个不带单位的值能够在用户空间中经过用户单位声称。假诺值通过用户单位声称,那么那么些值的数值被认为和px单位的数值一样。那代表上述例子将被渲染为800px*600px的视窗。

您也足以运用单位来表明值。SVG帮忙的长度单位有:emexpxptpccmmmin和比重。

若是您设定最外层SVG成分的宽高,浏览器会建立开端视窗坐标系和始发用户坐标系。

  旋转 – rotate      
旋转贰个要素也是八个很广泛的任务,大家得以应用rotate变换达成,该变换要求传入旋转的角度参数。看例子:

<g transform=”translate(-10,-20) scale(2) rotate(45)
translate(5,10)”>
<!– graphics elements go here –>
</g>

X’ = aX + cY + e

none

不强制统一缩放。如若供给的话,在不统一(即不保险宽高比)的情景下缩放给定成分的图像内容直到成分的界限盒完全匹配是视窗矩形。

换句话说,即使有须要的话viewBox被拉伸或缩放来完全适应整个视窗,不管宽高比。图形恐怕会扭曲。

(注意:如果<align>的值是none,可选的<meetOrSlice>值无效。)

1 0 tx       
0 1 ty
0 0 1

代码如下:

慕课网SVG教程对于ViewBox的言传身教,笔者觉着不错,能够自个儿实施操作,看看效果。

preserveAspectRatio属性

preserveAspectRatio质量强制统一缩放比来保持图形的宽高比。

万一你用区别于视窗的宽高比定义用户坐标系,要是像大家在事先的事例中观望的那么浏览器拉伸viewBox来适应视窗,宽高比的例外会导致图形在一些方向上扭动。所以一旦上二个例子中的viewBox被拉伸以在有着矛头上适应视窗,图形看起来如下:金沙国际 9

当给viewBox设置0 0 200 300的值时扭曲可想而知(显著那很不地道),那一个值紧跟于视窗尺寸。作者故意选择这一个尺寸从而让viewBox协作鹦鹉边界盒子的尺寸。尽管浏览器拉伸图像来适应整个视窗,看起来会像上面这样:金沙国际 10

preserveAspectRatio性子让你能够在维系宽高比的意况下强制统一viewBox的缩放比,并且只要不想用私下认可居中你能够注脚viewBox在视窗中的地点。

  平移 – translate      
平移变换把有关的坐标值平移到钦命的职位,该变换必要传入多个轴上运动的量。看例子:

<svg width=”200″ height=”200″ viewBox=”0 0 200 200″>
<rect x=”0″ y=”0″ width=”200″ height=”200″ fill=”Red” />
<rect x=”0″ y=”0″ width=”100″ height=”100″ fill=”Green” />
</svg>

本文为原创作品,转发请保留原出处,方便溯源,如有错误地点,多谢指正。

xMidYMin

      下图诠释了各类填充的意义:

其一事例会来得四个转悠45度的矩形。有几点注意:
1.那边的转移是以角度值为参数的。
2.旋转指的是争持于x轴的团团转。
3.筋斗是围绕用户坐标系的原点(0,0)展开的。

属性 描述 示例
matrix(<a> <b> <c> <d> <e> <f>) 使用变换矩阵 向右平移10

matrix(1,0,0,1,10,0)
translate(<x> [<y>]) 平移
PS:y默认是0
向右平移10
translate(10)
scale(<x> [<y>]) 缩放
PS:y未取值时,值等于x
放大2倍

scale(2)
rotate(<a> [<x> <y>]) 旋转
当x、y没值时,旋转的圆心是用户坐标系;
当x、y有值时,旋转的圆心是(x,y);
旋转30°

rotate(30)
skewX(<a>) 向x斜切a度 斜切45度

skewX(45)
skewY(<a>) 向y斜切a度 斜切45度

skewY(45)

meet(默认值)

依照以下两条准侧尽恐怕缩放成分:

在那些状态下,就算图形的宽高比不合乎视窗,一些视窗会胜出viewBox的边界(即viewBox绘制的区域会低于视窗)。(在viewBox一节查看最终的事例。)在那些意况下,viewBox的界线被含有在viewport中使得边界满足。

本条值类似于background-size: contain。背景图片在保证宽高比的情状下尽可能缩放并保管它符合背景绘制区域。假如背景的长度宽度比和行使的元素的长度宽度比不平等,部分背景绘制区域会并未背景图片覆盖。

cos(a) -sin(a) 0
sin(a) cos(a)  0
  0      0     1

旋转 – rotate 旋转三个成分也是八个很宽泛的职分,大家能够动用rotate变换实现,该变换需求传入旋转的角度参数。看例子:

<html>
    <head>
        <title>transform</title>
        <style>
            body {
                background: #eee;
            }
            svg {
                position: absolute;
                border: 1px solid green;
                width: 300px;
                height: 200px;
                left: 50%;
                top: 50%;
                margin-top: -100px;
                margin-left: -150px;
                background: white;
            }
        </style>
    </head>
    <body>
          <svg id="svg" xmlns="http://www.w3.org/2000/svg">
               <rect width="200" height="100" stroke="red" stroke-width="2" fill="none" transform="rotate(30) translate(50)"/>
          </svg>
    </body>
</html>

与viewport宽高比相同的viewBox

我们从1个粗略的例证早先。这些事例中的viewBox的尺寸是视窗尺寸的二分一。在这些事例中大家不转移viewBox的原点,所以<min-x><min-y>都设置成0。viewBox的宽高是viewport宽高的1/2。那表示大家维持宽高比。

<svg width=”800″ height=”600″ viewBox=”0 0 400 300″> <!– SVG
content drawn onto the SVG canvas –> </svg>

1
2
3
<svg width="800" height="600" viewBox="0 0 400 300">
    <!– SVG content drawn onto the SVG canvas –>
</svg>

所以,viewBox="0 0 400 300"到底有啥用吧?

上面包车型客车图样展现了在大家例子中把下边包车型客车viewBox应用到<svg> 画布中的效果。水晶色单位表示视窗坐标系,黄褐坐标系代表viewBox建立的用户坐标系。

金沙国际 11

其他在SVG画布中画的内容都会被对应到新的用户坐标系中。

本身喜欢像谷歌地图一样通过viewBox把SVG画布形象化。在谷歌(Google)地图中您能够在一定区域缩放;那个区域是唯一可知的,并且在浏览器视窗中按百分比扩大。然则,你精晓地图的剩余部分还在那边,可是不可知因为它超过视窗的境界-被裁切了。

今昔让大家试着改变<min-x><min-y>的值。都安装为100。你能够设置成任何你想要的值。宽高比照旧和视窗的宽高比一样。

<svg width=”800″ height=”600″ viewBox=”100 100 200 150″> <!–
SVG content drawn onto the SVG canvas –> </svg>

1
2
3
<svg width="800" height="600" viewBox="100 100 200 150">
    <!– SVG content drawn onto the SVG canvas –>
</svg>

添加viewBox="100 100 200 150"的法力和事先例子中一律都是裁切的机能。图形被裁切然后拉伸来充满整个视窗区域。

金沙国际 12

再1次,用户坐标系被映射到视窗坐标系-200用户单位映射为800视窗单位因而种种用户单位等于多少个视窗单位。结果像您看看的那样是松手的效劳。

其它注意,在那一个时候,为<min-x><min-y>宣示非0的值对图片有转换的功效;特别尤其的是,SVG
画布看起来发展拉伸玖十几个单位,向左拉伸九十七个单位(transform="translate(-100 -100)")。

诚然,作为标准表明,viewBox属性的震慑在于用户代理自动抬高适当的转移矩阵来把用户空间中具体的矩形映射到钦定区域的境界(经常是视窗)”

那是贰个很棒的证实我们在此以前已经涉嫌的情节的格局:图形被裁切然后被缩放以适应视窗。这几个表明随着扩充了一个诠释:“在部分意况下用户代理在缩放变换之外部要求要充实二个平移变换。例如,在最外层的svg元素上,倘若viewBox属性对<min-x><min-y>扬言非0值得那么就须要活动变换。”

为了更好示范移动变换,让我们试着给<min-x><min-y>添加-100。移动作效果果类似transform="translate(100 100)";那象征图形会在切割和缩放后活动到右下方。回看倒数第二个裁切尺寸为400*300的例证,添加新的无效<min-x><min-y>值,新的代码如下:

<svg width=”800″ height=”600″ viewBox=”-100 -100 300 200″> <!–
SVG content drawn onto the SVG canvas –> </svg>

1
2
3
<svg width="800" height="600" viewBox="-100 -100 300 200">
    <!– SVG content drawn onto the SVG canvas –>
</svg>

给图形添加上述viewBox transformation的结果如下图所示:金沙国际 13

注意,与transform属性分歧,因为viewBox机关抬高的tranfomation不会影响有vewBox性格的因素的x,y,宽和高等属性。由此,在上述例子中呈现的含有width,heightviewBox属性的svg元素,widthheight品质代表添加viewBox 变换在此之前的坐标系中的值。在上述例子中你能够观望起始(铁锈棕)viewport坐标系甚至在<svg>上选择了viewBox属性后依旧没有影响。

一方面,像tranform特性一样,它给拥有其余品质和后人成分建立了八个新的坐标系。你还能看看在上述例子中,用户坐标系是新建立的-它不是保持像伊始用户坐标系和动用viewBox前的视窗坐标系一样。任何<svg>后代会在那么些的用户坐标系中向来和规定尺寸,而不是开始坐标系。

最后四个viewBox的事例和前3个近似,可是它不是切割画布,我们将在viewport里增加它并看它怎么样影响图形。我们将宣示2个宽高比视窗大的viewBox,并一如既往维持viewport的宽高比。大家在下一章里钻探区别的宽高比。

在那么些事例中,咱们将viewBox的尺寸设为viewport的1.5倍。

<svg width=”800″ height=”600″ viewBox=”0 0 1200 900″> <!– SVG
content drawn onto the SVG canvas –> </svg>

1
2
3
<svg width="800" height="600" viewBox="0 0 1200 900">
    <!– SVG content drawn onto the SVG canvas –>
</svg>

明天用户坐标系会被放大到1200*900。它会被映射到视窗坐标系,用户坐标系中的每二个单位水平方向上等于视窗坐标系中的viewport-width / viewBox-width,竖直方向上等于viewport-height / viewBox-height。那意味着,在这种情况下,每多个用户坐标系中的x-units相当于viewport坐标系中的0.66x-units,各种用户y-unit映射成0.66的viewport
y-units。

本来,明白这一个最好的法子是把结果视觉化。viewBox被缩放到适应下图所示的viewport。因为图形在画布里基于新的用户坐标系绘制的,而不是视窗坐标系,它看起来比视窗小。金沙国际 14

到近年来截至,大家拥有的事例的宽高比都和视窗一致。然而如果viewBox中扬言的宽高比和视窗中的不等同会时有产生如何呢?例如,试想大家把视窗的尺码设为1000*500。宽高比不再和视窗的一模一样。在例子中利用viewBox="0 0 1000 500"的结果如下图:金沙国际 15

用户坐标系。因此图形在视窗中一直:

那是暗许表现。那用怎么着决定表现吧?假若我们想更改视窗中viewBox的任务吗?这就要求使用preserveAspectRatio属性了。

     
从结果中,你能够从来看出同一尺寸的矩形,在分裂的倾斜变换后,获得的职位和形态。这里注意矩形的起首位置都曾经转移了,那是因为在新的坐标类别中,(30,30)已经在不一样的职位了。

<svg width=”200″ height=”200″ viewBox=”0 0 400 400″>
<rect x=”0″ y=”0″ width=”200″ height=”200″ fill=”Red” />
<rect x=”0″ y=”0″ width=”100″ height=”100″ fill=”Green” />
</svg>

浏览器视窗(viewport)

xMinYMin

     
上面包车型客车例证绘制的图中你能够看到紫橄榄棕和革命的矩形,那种情景下视窗坐标系的点恐怕与视窗上的点是种种对应的,这么些也是暗许景况。

沿Y轴的倾斜[1 tan(a) 0 1 0 0]:

坐标变换

xMaxYMin

金沙国际 16

是因为唯有多少个值用到了,所以也简写成[a b c d e
f]。把matrix(a,b,c,d,e,f)赋给transfrom就能够执行相应的转换。变换会把坐标和尺寸都转换成新的尺码。上边各样变换对应的矩阵如下:

SVG中,坐标变换是对1个坐标系到另三个坐标系的转换的讲述。

xMaxYMax

由此,通过应用preserveAspectRatio属性的alignmeetOrSlice值,你能够证明是或不是统一缩放viewBox,是还是不是和视窗对齐,在视窗中是还是不是整个可知。

有时候,取决于viewBox的尺码,一些值恐怕会造成相似的结果,例如在从前viewBox="0 0 200 300"的例证中,一些对齐完全用了区别的align值。那时候就要设置meetOrSlice的值为meet来保证viewBox包含在viewport内。金沙国际 17

倘使大家把meetOrSlice的值改成slice,差别的值我们将收获分裂的结果。注意viewBox是怎么拉伸来覆盖全部视窗的。x轴被拉伸到用200单位来掩盖视窗800单位。为了达到这一个指标,并且维持viewBox的宽高比,y轴在底层被“裁切”,不过你能够想像它在视窗中高度上的拉开。金沙国际 18

当然,不同的viewBox值看起来分裂于我们那边用的200*300。为了维持简洁,大家不再列举越多的例子,你能够看笔者创造的一些互为演示来扶助你更好地形象化精通viewBoxpreserveAspectRatio在差别值下的效益。你能够在一下节中查看互动演示例子的链接。

可是在那前面,作者想要提示您注意假诺<min-x> 和 <min-y>值改变,那么mid-xmid-ymax-x,
和 max-y的值也会产生变更。你能够在相互演示中改变这么些值来查看轴以及相关联的viewBox的对齐格局的变更。

上边图片体现了定位轴的职分为viewBox = "100 0 200 300"时的意义。和事先用同一的例子,但是大家把<min-x>的值设为100而不是事先的0。你能够设置成任何你想要的值。注意min-xmid-x,
和 max-x轴是怎么转移的。那里运用的preserveAspectRatio值为默许的xMinYMin meet,意味着mid-*轴和视窗轴的中等对齐。金沙国际 19

 

平移变换[1 0 1 0 tx ty]:

2. 线性别变化换

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图