• 售前

  • 售后

热门帖子
入门百科

HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变更概述

[复制链接]
楼琴观雪让 显示全部楼层 发表于 2021-10-25 19:10:40 |阅读模式 打印 上一主题 下一主题
坐标体系SVG存在两套坐标体系:视窗坐标系与用户坐标系。默认环境下,用户坐标系与视窗坐标系的点是逐一对应的,都为原点在视窗的左上角,x轴水平向右,y轴竖直向下;如下图所示:

SVG的视窗位置一般是由CSS指定,尺寸由SVG元素的属性width和height设置,但是假如SVG是存储在embedded对象中(比方object元素,或者其他SVG元素),而且包罗SVG的文档是用CSS或者XSL格式化的,而且这些外围对象的CSS或者其他指定尺寸的值已经可以计算出视窗的尺寸了,则此时会利用外围对象的尺寸。
这里需要区分视窗,视窗坐标系,用户坐标系的概念:
视窗:指的是网页上面可视的矩形局域,长度和宽度都是有限的,这个地区一般与外围对象的尺寸有关。
视窗坐标系:本质是一个坐标系,有原点,x轴与y轴;而且在两个方向上是无限延伸的。默认环境下,原点在视窗的左上角,x轴水平向右,y轴竖直向下。可以对这个坐标系的点举行变更。
用户坐标系:本质是一个坐标系,有原点,x轴与y轴;而且在两个方向上是无限延伸的。默认环境下,原点在视窗的左上角,x轴水平向右,y轴竖直向下。可以对这个坐标系的点举行变更。
默认环境下,视窗坐标系与用户坐标系是重合的,但是这里需要注意,视窗坐标系属于的是创建视窗的元素,视窗坐标系确定好以后,整个视窗的坐标基调就确定了。但是用户坐标系是属于每个图形元素的,只要图形举行了坐标变更,就会创建新的用户坐标系,这个元素中全部的坐标和尺寸都利用这个新的用户坐标系。
简朴点说:视窗坐标系形貌了视窗中全部元素的初始坐标概况,用户坐标系形貌了每个元素的坐标概况,默认环境下,全部元素都利用默认的与视窗坐标系重合的那个用户坐标系。
坐标空间变更让我们回顾一下canvas用户坐标的变更,它们是通过平移,缩放,旋转函数实现的;每次变更后对以后绘制的图形都起作用,除非再次举行变更,这是"当前"用户坐标体系的概念。canvas只有唯逐一个用户坐标系。
在SVG中,环境完全差别。SVG本身作为一种向量图元素,它的两个坐标体系本质上都可以算作"用户坐标体系";SVG的两个坐标空间都是可以变更的:视窗空间变更和用户空间变更。视窗空间变更由相干元素(这些元素创建了新的视窗)的属性viewBox控制;用户空间变更由图形元素的transform属性控制。视窗空间变更应用于对应的整个视窗,用户空间变更应用于当前元素及其子元素。
视窗变更 - viewBox属性
全部的能创建一个视窗的元素(看下一节),再加上marker,pattern,view元素,都有一个viewBox属性。
viewBox属性值的格式为(x0,y0,u_width,u_height),每个值之间用逗号或者空格隔开,它们共同确定了视窗表现的地区:视窗左上角坐标设为(x0,y0)、视窗的宽设为u_width,高为u_height;这个变更对整个视窗都起作用。
这里肯定不要混淆:视窗的巨细和位置已经由创建视窗的元素和外围的元素共同确定了(比方最外层的svg元素创建的视窗由CSS,width和height确定),这里的viewBox其实是设置这个确定的地区能表现视窗坐标系的哪个部门。viewBox的设置其实是包罗了视窗空间的缩放和平移两种变更。
变更的计算也很简朴:以最外层的svg元素的视窗为例,假设svg的宽与长设置为width,height,viewBox的设置为(x0,y0,u_width,u_height)。则绘制的图形,宽和高的缩放比例分别为:width/u_width, height/u_height。视窗的左上角的坐标设置为了(x0,y0)。
领会下面几种代码绘出的结果的差别:

复制代码代码如下:
<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>

上面的例子绘制的图中你可以看到绿色和红色的矩形,这种环境下视窗坐标系的点还是与视窗上的点是逐一对应的,这个也是默认环境。

复制代码代码如下:
<svg width="200" height="200" viewBox="0 0 100 100">
<rect x="0" y="0" width="200" height="200" fill="Red" />
<rect x="0" y="0" width="100" height="100" fill="Green" />
</svg>

上面的例子绘制的图中这个你只能看到绿色的矩形,而且绿色的矩形表现在屏幕上是200*200像素的,这个时候坐标点已经不是逐一对应了,图被放大了。

复制代码代码如下:
<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>

上面的例子绘制的图中,视窗坐标系的单元被缩小,以是两个矩形都缩小了。
在日常工作中,我们经常需要完成的一个任务就是缩放一组图形,让它适应它的父容器。我们可以通过设置viewBox属性到达这个目标。
创建新视窗的元素任何时候,我们都可以嵌套视窗。创建新的视窗的时候,也会创建新的视窗坐标系和用户坐标系,当然也包罗裁减路径也会创建新的。下列是能创建新视窗的元素列表:
svg:svg支持嵌套。
symbol:当被use元素实例化的时候创建新的视窗。
image:引用svg元素时会创建新视窗。
foreignObject:创建新视窗去渲染内里的对象。
保持缩放的比例 - preserveAspectRatio属性有些时候,特别是当利用viewBox的时候,我们盼望图形占据整个视窗,而不是两个方向上按雷同的比例缩放。而有些时候,我们却是盼望图形两个方向是按照固定的比例缩放的。利用属性preserveAspectRatio就可以到达控制这个的目标。
这个属性是全部能创建一个新视窗的元素,再加上image,marker,pattern,view元素都有的。而且preserveAspectRatio属性只有在该元素设置了viewBox以后才会起作用。假如没有设置viewBox,则preserveAspectRatio属性会被忽略。
属性的语法如下:preserveAspectRatio="[defer] <align> [<meetOrSlice>]"
注意3个参数之间需要利用空格隔开。
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方向与上面雷同。
  xMaxYMin - 强制同一缩放,而且把viewBox中设置的<min-x> + <width>对齐到viewport的X值最大处。
  雷同的还有其他范例的值:xMinYMid,xMidYMid,xMaxYMid,xMinYMax,xMidYMax,xMaxYMax。这些组合的寄义与上面的几种环境雷同。
meetOrSlice:可选参数,可以去下列值:
  meet - 默认值,同一缩放图形,让图形全部表现在viewport中。
  slice - 同一缩放图形,让图形充满viewport,超出的部门被剪裁掉。
下图诠释了各种添补的结果:


用户坐标系的变更 - transform属性该范例变更是通过设置元素的transform属性来指定的。这里需要注意,transform属性设置的元素的变更,只影响该元素及其子元素,与别的元素无关,不影响别的元素。
平移 - translate平移变更把相干的坐标值平移到指定的位置,该变更需要传入两个轴上平移的量。看例子:

复制代码代码如下:
<rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />

这个例子绘制一个矩形,并把它的出发点(0,0)平移到(30,40)处。虽然可以直接设置(x,y)的坐标值,但是利用平移变更去实现也很方便。这个变更第二个参数可以省略,默认当0处理。
旋转 - rotate旋转一个元素也是一个很常见的任务,我们可以利用rotate变更实现,该变更需要传入旋转的角度参数。看例子:

复制代码代码如下:
<rect x="20" y="20" width="20" height="20" transform="rotate(45)" />

这个例子会表现一个旋转45度的矩形。有几点注意:
1.这里的变更是以角度值为参数的。
2.旋转指的是相对于x轴的旋转。
3.旋转是围绕用户坐标系的原点(0,0)展开的。
倾斜 - skewtransform还支持倾斜变更,可以是沿着x轴的(左右倾斜,正角度为向右倾斜,其实是倾斜了y轴),或者是沿着y轴的(上下倾斜,正角度为向下倾斜,其实是倾斜了x轴)倾斜;该变更需要传入一个角度参数,这个角度参数会决定倾斜的角度。看下面的例子:

复制代码代码如下:
<svg width="100" height="100">
  <rect x="0" y="0" width="100" height="100" fill="green" />
  <circle cx="15" cy="15" r="15" fill="red" />
  <circle cx="15" cy="15" r="15" fill="yellow" transform="skewX(45)" />
  <rect x="30" y="30" width="20" height="20"  />
  <rect x="30" y="30" width="20" height="20" transform="skewX(45)"  />
  <rect x="30" y="30" width="20" height="20" transform="skewY(45)"  />
</svg>

从结果中,你可以直接看到同样尺寸的矩形,在差别的倾斜变更后,得到的位置和形状。这里注意矩形的起始位置都已经改变了,这是由于在新的坐标体系中,(30,30)已经在差别的位置了。
缩放 - scale缩放对象由缩放变更完成,该变更担当2个参数,分别指定在水平和竖直上的缩放比例,假如第二个参数省略则与第一个参数取雷同的值。看下面的例子:

复制代码代码如下:
<svg width="500" height="500">
<text x="20" y="20" font-size="20">ABC (scale)</text>
<text x="50" y="50" font-size="20" transform="scale(1.5)">ABC (scale)</text>
</svg>

变更矩阵 - matrix学过图形学的都知道,全部的变更其实都是由矩阵表征的,以是上面的变更其实都可以用一个3*3矩阵去表现:

复制代码代码如下:
a c e
b d f
0 0 1

由于只有6个值用到了,以是也简写成[a b c d e f]。把matrix(a,b,c,d,e,f)赋给transfrom就可以实行相应的变更。变更会把坐标和长度都转换成新的尺寸。上面各种变更对应的矩阵如下:
平移变更[1 0 1 0 tx ty]:

复制代码代码如下:
1 0 tx
0 1 ty
0 0 1

缩放变更[sx 0 0 sy 0 0]:

复制代码代码如下:
sx 0 0
0 sy 0
0  0 1

旋变化换[cos(a) sin(a) -sin(a) cos(a) 0 0]:

复制代码代码如下:
cos(a) -sin(a) 0
sin(a) cos(a)  0
  00     1

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

复制代码代码如下:
1 tan(a) 0
0   1    0
0   0    1

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

复制代码代码如下:
11 0
tan(a) 1 0
00 1

变更本质前面我们总结canvas的时候,我们知道各种变更都是作用在用户坐标系上的。在SVG中,全部的变更也都是针对两个坐标系(本质上都是"用户坐标系")的。当给容器对象或图形对象指定"transform"属性,或者给"svg,symbol,marker,pattern,view"指定"viewBox"属性以后,SVG会根据当前的用户坐标体系举行变更,去创建新的用户坐标系,并作用于当前的对象以及它的子对象。该对象中指定的坐标和长度的单元不再是1:1的对应到外围的坐标系,而是随着变形,转换到新的用户坐标系中;这个新的用户坐标系是只作用于当前的元素及其子元素。
变更链transform属性支持设置多个变更,这些变更只要中间用空格分开,然后一起放到属性中就可以了。执行结果跟按次序独立执行这些变更是一样的。

复制代码代码如下:
<g transform="translate(-10,-20) scale(2) rotate(45) translate(5,10)">
  <!-- graphics elements go here -->
</g>

上面的结果与下面的一样:

复制代码代码如下:
<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>

单元
最后说一下单元,任何坐标和长度都可以带和不带单元。
不带单元的环境
不带单元的值被以为带的是"用户单元",就是当前用户坐标系的单元值。
带单元的环境
svg中相干单元与CSS中是一样的:em,ex,px,pt,pc,cm,mm和in。长度还可以利用"%"。
相对度量单元:em和ex也与CSS中一样,是相对于当前字体的font-size和x-height来说的。
绝对度量单元:一个px是等于一个"用户单元"的,也就是"5px"与"5"是一样的。但是一个px是不是对应一个像素,那就看有没有举行过一些变更了。
其他的几个单元基本都是px的倍数:1pt=1.25px,1pc=15px,1mm=3.543307px,1cm=35.43307px,1in=90px。
假如最外层的SVG元素的width和height没有指定单元(也就是"用户单元"),则这些值会被以为单元是px。
这一篇比力拗口,其实只要记着“图形元素的坐标和长度指的是,颠末视窗坐标系变更和用户坐标系变更双重变更后,新用户坐标系的坐标和长度”就可以了
实用参考:
脚本索引:http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
开辟中心:https://developer.mozilla.org/en/SVG
热门参考:http://www.chinasvg.com/
官方文档:http://www.w3.org/TR/SVG11/

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作