www.22138com「太阳集团游戏」太阳2007娱乐官方网址

欢迎更多朋友与我们www.22138com合作,太阳集团游戏是由安全软件管理软件整合而成的最新安全卫士,其实这是因为目前已经推出了太阳2007娱乐官方网址的新网址,带您体验至尊级享受!。

   译文出处

2019-06-08 02:09 来源:未知

知情SVG坐标系和转移:视窗,viewBox和preserveAspectRatio

2015/09/23 · HTML5 · SVG

原来的文章出处: SaraSoueidan   译文出处:Blueed(@Ivan_z3)   

SVG成分不像HTML成分一样由CSS盒模型管理。那使得大家得以进一步灵敏定位和转变那些要素-只怕一眼看上去不太直观。然则,壹旦你精通了SVG坐标系和更动,垄断(monopoly)SVG会特别轻松并且很有意义。本篇小说中大家将商量决定SVG坐标系的最重大的三个属性:viewport, viewBox, 和 preserveAspectRatio

那是本类别三篇文章中的第1篇,那篇作品研讨SVG中的坐标系和转移。

  • 知情SVG坐标系和转移(第2有个别)-viewport,viewBox,和preserveAspectRatio
  • 知晓SVG坐标系和转变(第2片段)-transform属性
  • 精通SVG坐标系和调换(第一有的)-创立新视窗

为了使文中的开始和结果和解释更形象化,笔者创制了三个并行演示,你能够随心所欲更换viewBox 和 preserveAspectRatio的值。

在线案例

本条例子只是第1内容的一小部分,所以看完请再次来到继续阅读那篇文章

SVG画布

canvas是绘制SVG内容的1块空间或区域。理论上,画布在颇具维度上都以最为的。所以SVG能够是肆意尺寸。不过,SVG通过少数区域表今后显示屏上,这一个区域叫做viewport。SVG中高于视窗边界的区域会被裁切并且隐藏。

视窗

视窗是壹块SVG可知的区域。你能够把视窗当做三个窗子,透过这些窗户能够看出特定的情景,景观可能完全,大概唯有1部分。

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成分的宽高,浏览器会创建起来视窗坐标系和开始用户坐标系。

开首坐标系

初始视窗坐标系是2个白手起家在视窗上的坐标系。原点(0,0)在视窗的左上角,X轴正向指向右,Y轴正向指向下,起始坐标系中的多个单位等于视窗中的三个”像素”。这几个坐标体系类似于经过CSS盒模型在HTML元素上建设构造的坐标系。

初始用户坐标系是树立在SVG画布上的坐标系。那个坐标系一齐初和视窗坐标系完全平等-它和煦的原点位于视窗左上角,x轴正向指向右,y轴正向指向下。使用viewBox属性,初阶用户坐标体系-也称眼前坐标系,或使用中的用户空间-能够产生与视窗坐标系不一致的坐标系。大家在一下节中探究哪些退换坐标系。

到未来停止,大家还平素不表明viewBox属性值。SVG画布的用户坐标种类和视窗坐标体系完全平等。

下图中,视窗坐标系的”标尺”是木色的,用户坐标系(viewBox)的是紫浅绿的。由于它们在那年一模二样,所以四个坐标种类重合了。太阳2007娱乐官方网址 1

地点SVG中的鹦鹉的外框边界是200个单位(这几个事例中是200个像素)宽和300个单位高。鹦鹉基于初步坐标系在画布中绘制。

新用户空间(即,新当前坐标系)也能够通过在容器成分或图表成分上使用transform属性来声称转变。大家将要这篇小说的第2有的商量关于转变的内容,越多细节在第3片段和尾声有的中切磋。

viewBox

自家欣赏把viewBox精通为“真实”坐标系。首先,它是用来把SVG图形绘制到画布上的坐标系。那么些坐标系能够当先视窗也能够低于视窗,在视窗中可以完全可见或局地可见。

在事先的章节里,这一个坐标系-用户坐标系-和视窗坐标系完全平等。因为大家未有把它注明成任何坐标系。这正是为何全部的原则性和制图看起来是依据视窗坐标系的。因为我们只要成立视窗坐标系(使用widthheight),浏览器默许创立二个完全同样的用户坐标系。

你能够利用viewBox属性证明本身的用户坐标系。假诺您采纳的用户坐标连串和视窗坐标体系宽高比(高比宽)同样,它会延伸来适应整个视窗区域(一分钟内大家就来说个例子)。然则,假如您的用户坐标系宽高比分裂,你能够用preserveAspectRatio品质来声称整个系统在视窗内是不是可知,你也能够用它来声称在视窗中如何牢固。大家会在下个章节里商讨那1景色的底细和例子。在那1章里,大家只谈谈viewBox的宽高比符合视窗的意况-在那些事例中,preserveAspectRatio不发生影响。

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

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>

万1你在此以前在别的地点看到过viewBox,你只怕相会到一些讲明说你能够用viewBox特性通过缩放也许更动使SVG图形调换。那是真的。我将深入探求并且告诉你还是足以应用viewBox来切割SVG图形。

理解viewBox和视窗之间差别最棒的方法是亲身观察。所以让我们看一些例证。大家将从viewBox和viewport的宽高比一样的事例开头,所以大家还无需长远摸底preserveAspectRatio

与viewport宽高比同样的viewBox

大家从三个归纳的事例早先。这些例子中的viewBox的尺寸是视窗尺寸的四分之二。在那么些事例中大家不改造viewBox的原点,所以<min-x><min-y>都设置成0。viewBox的宽高是viewport宽高的一半。这表示我们保持宽高比。

<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"终归有哪些用呢?

  • 它表明了多少个一定的区域,canvas横跨左上角的点(0,0)到点(400,300)
  • SVG图像被那一个区域裁切
  • 区域被拉伸(类似缩放效果)来充满整个视窗。
  • 用户坐标系被映射到视窗坐标系-在这种状态下-三个用户单位等于三个视窗单位。

上面包车型大巴图片展现了在我们例子中把地点的viewBox应用到<svg> 画布中的效果。灰湖绿单位表示视窗坐标系,浅绛红坐标系代表viewBox创立的用户坐标系。

太阳2007娱乐官方网址 2

其它在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"的法力和前面例子中同样都以裁切的机能。图形被裁切然后拉伸来充满整个视窗区域。

太阳2007娱乐官方网址 3

再一遍,用户坐标系被映射到视窗坐标系-200用户单位映射为800视窗单位由此各样用户单位等于多个视窗单位。结果像你看看的那么是拓宽的功力。

除此以外注意,在这个时候,为<min-x><min-y>注明非0的值对图纸有转移的法力;越发特别的是,SVG 画布看起来发展拉伸玖拾捌个单位,向左拉伸玖拾玖个单位(transform="translate(-100 -100)")。

真的,作为规范表明,viewBox品质的震慑在于用户代理自动抬高适当的转变矩阵来把用户空间中具体的矩形映射到钦定区域的境界(平时是视窗)”

这是一个很棒的印证大家后边早已涉及的内容的措施:图形被裁切然后被缩放以适应视窗。那几个注明随着扩充了多个讲解:“在有个别气象下用户代理在缩放转变之外部供给要追加二个移动调换。比如,在最外层的svg成分上,即便viewBox属性对<min-x><min-y>宣称非0值得那么就供给活动转变。”

为了更加好示范移动转换,让大家试着给<min-x>太阳集团游戏,和<min-y>太阳2007娱乐官方网址,增多-十0。移动效果类似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的结果如下图所示:太阳2007娱乐官方网址 4

注意,与transform属性区别,因为viewBox机关抬高的tranfomation不会潜移默化有vewBox特性的因素的x,y,宽和高档属性。由此,在上述例子中展现的涵盖width,heightviewBox属性的svg元素,widthheight质量代表增添viewBox 转变从前的坐标系中的值。在上述例子中您能够看看初叶(鲜红)viewport坐标系乃至在<svg>上应用了viewBox属性后依然未有影响。

另1方面,像tranform属性同样,它给全数其余质量和后代成分建构了一个新的坐标系。你还足以看到在上述例子中,用户坐标系是新制造的-它不是维系像初阶用户坐标系和接纳viewBox前的视窗坐标系同样。任何<svg>后代会在这一个的用户坐标系中固定和规定尺寸,而不是开首坐标系。

末尾叁个viewBox的事例和前二个好像,可是它不是切割画布,大家将要viewport里扩张它并看它什么影响图形。大家将宣示一个宽高比视窗大的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。因为图形在画布里基于新的用户坐标系绘制的,而不是视窗坐标系,它看起来比视窗小。太阳2007娱乐官方网址 5

到近日甘休,我们具备的例证的宽高比都和视窗一致。然则倘若viewBox中注解的宽高比和视窗中的不同会发生什么样啊?比如,试想我们把视窗的尺码设为一千*500。宽高比不再和视窗的同等。在例子中使用viewBox="0 0 1000 500"的结果如下图:太阳2007娱乐官方网址 6

用户坐标系。因而图形在视窗中定位:

  • 整个viewBox适应视窗。
  • 保持viewBox的宽高比。viewBox未有被拉伸来覆盖视窗区域。
  • viewBox在视窗中国水力电力对民有集团业平垂直居中。

这是暗中同意表现。那用哪些决定表现吧?若是大家想更换视窗中viewBox的地方吗?那就必要选取preserveAspectRatio属性了。

preserveAspectRatio属性

preserveAspectRatio属性强制统1缩放比来保持图形的宽高比。

倘让你用分歧于视窗的宽高比定义用户坐标系,如果像大家在前面包车型地铁例子中看到的那样浏览器拉伸viewBox来适应视窗,宽高比的比不上会产生图形在少数方向上扭转。所以倘若上四个例子中的viewBox被拉伸以在富有矛头上适应视窗,图形看起来如下:太阳2007娱乐官方网址 7

当给viewBox设置0 0 200 300的值时扭曲同理可得(鲜明那很适得其反),这几个值小于视窗尺寸。小编有意选拔那几个尺寸从而让viewBox合营鹦鹉边界盒子的尺码。假如浏览器拉伸图像来适应整个视窗,看起来会像上边这样:太阳2007娱乐官方网址 8

preserveAspectRatio质量让你能够在维系宽高比的动静下强制统1viewBox的缩放比,并且只要不想用默许居中您能够申明viewBox在视窗中的地方。

preserveAspectRatio语法

preserveAspectRatio的法定语法是:

JavaScript

preserveAspectRatio = defer? <align> <meetOrSlice>?

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

它在其余建构新viewport的要素上都灵验(大家会在这一个种类的下壹部分冲突那个主题材料)。

deferwww.22138com,声称是可选的,并且唯有当您在<image>上添加preserveAspectRatio才被用到。用在别的别的因素上时它都会被忽视。<images>本身不在那篇小说的座谈范围,我们暂且跳过defer其1选项。

align参数注明是或不是强制统1放缩,假使是,对齐方法会在viewBox的宽高比不合乎viewport的宽高比的动静下生效。

如果align值设为none,例如:

JavaScript

preserveAspectRatio = "none"

1
preserveAspectRatio = "none"

图片不在保持宽高比而会缩放来适应视窗,像我们在地点多少个例子中看出的那么。

其余具备preserveAspectRatio值都在保证viewBox的宽高比的状态下强制拉伸,并且钦赐在视窗内怎么对齐viewBox。大家会简介align的值。

最终3性子能,meetOrSlice也是可选的,默许值为meet。那一个性情注脚整个viewBox在视窗中是或不是可见。如若是,它和align参数通过一个或七个空格分隔。举例:

JavaScript

preserveAspectRatio = "xMinYMin slice"

1
preserveAspectRatio = "xMinYMin slice"

这个值第二立马起来或然很目生。为了让它们更易于了然和熟识,你能够把meetOrSlice的值类比于background-sizecontaincover值;它们特别类似。meet类似于containslice类似于cover。上边是各种值的概念和含义:

meet(默认值)

依据以下两条准侧尽可能缩放成分:

  • 保证宽高比
  • 整个viewBox在视窗中可知

在那个状态下,就算图形的宽高比不合乎视窗,一些视窗会高于viewBox的边界(即viewBox制图的区域会小于视窗)。(在viewBox1节查看最终的事例。)在这一个情景下,viewBox的境界被含有在viewport中使得边界满足。

以此值类似于background-size: contain。背景图片在维系宽高比的动静下尽可能缩放并保管它适合背景绘制区域。倘使背景的长宽比和平运动用的成分的长宽比不等同,部分背景绘制区域会并未背景图片覆盖。

slice

在保持宽高比的情况下,缩放图形直到viewBox覆盖了上上下下视窗区域。viewBox被缩放到正好蒙面视窗区域(在多少个维度上),不过它不会缩屏弃布鲁诺出这几个界定的部分。换来讲之,它缩放到viewBox的宽高能够正好完全覆盖视窗。

在这种场所下,假诺viewBox的宽高比不切合视窗,壹部分viewBox会扩充超越视窗边界(即,viewBox绘制的区域会比视窗大)。这会招致有个别viewBox被切片。

您能够把那个类比为background-size: cover。在背景图片的情况中,图片在有限支撑本人宽高比(如何)的景况下缩放到宽高能够完全覆盖背景定位区域的蝇头尺寸。

所以,meetOrSlice被用来声称viewBox是不是会被全然包含在视窗中,恐怕它是或不是相应尽只怕缩放来覆盖全部视窗,以至表示部分的viewBox会被“slice”。

举个例子,假诺我们注脚viewBox的尺码为200*300,并且采纳了meetslice值,保持align值为浏览器暗中认可,各种值的结果会看起来如下:太阳2007娱乐官方网址 9

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

当使用百分比率时,align值类似于background-position。你可以把viewBox当做背景图像。通过align定位和background-position的两样在于,不一样于通过三个与视窗相关的点来声称3个一定的viewBox值,它把具体的viewBox“轴”和对应的视窗的“轴”对齐。

为了驾驭每一种align值的意思,大家将率先介绍每1个“轴”。

还记得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"太阳2007娱乐官方网址 10

上边图片中的浅米灰虚线代表视窗的mid-xmid-y轴。大家将对它们赋一些值来对齐viewBoxmid-xmid-y轴。对于视窗,min-x的值等于0min-y值也非常0max-x值等于viewBox的宽度,max-y的值等于中度,mid-xmid-y表示了大幅度和冲天的中间值。

对齐的取值包蕴:

none

不强制统1缩放。如若供给的话,在不统一(即不保证宽高比)的情状下缩放给定成分的图像内容直到成分的界线盒完全协作是视窗矩形。

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

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

xMinYMin

  • 强制统一缩放
  • 视窗X轴的最小值对齐成分viewBox<min-x>
  • 视窗Y轴的最小值对齐元素viewBox的<min-y>
  • 把那些类比为backrgound-position: 0% 0%;

xMinYMid

  • 强制统1缩放。
  • 视窗X轴的最小值对齐成分viewBox<min-x>
  • 视窗Y轴的中等值来对齐成分的viewBox的中间值。
  • 把那个类比为backrgound-position: 0% 50%;

xMinYMax

  • 强制统一缩放。
  • 视窗X轴的最小值对齐成分viewBox<min-x>
  • 视窗X轴的最大值对齐成分的viewBox<min-y> <height>
  • 把那么些类比为backrgound-position: 0% 100%;

xMidYMin

  • 强制统一缩放。
  • 视窗X轴的中间值对齐成分的viewBox的X轴中间值。
  • 视窗Y轴的中间值对齐成分的viewBox的 <min-y>
  • 把那一个类比为backrgound-position: 50% 0%;

xMidYMid (默认值)

  • 强制统1缩放。
  • 视窗X轴的中间值对齐成分的viewBox的X轴中间值。
  • 视窗Y轴的中间值对齐成分的viewBox的Y轴中间值。
  • 把那么些类比为backrgound-position: 50% 50%;

xMidYMax

  • 强制统一缩放。
  • 视窗X轴的中间值对齐成分的viewBox的X轴中间值。
  • 视窗Y轴的最大值对齐成分的viewBox<min-y> <height>
  • 把那些类比为backrgound-position: 50% 100%;

xMaxYMin

  • 强制统一缩放。
  • 视窗X轴的最大值对齐成分的viewBox的 <min-x> <width>
  • 视窗Y轴的最小值对齐元素的viewBox<min-y>
  • 把这些类比为backrgound-position: 100% 0%;

xMaxYMid

  • 强制统一缩放。
  • 视窗X轴的最大值对齐成分的viewBox的 <min-x> <width>
  • 视窗Y轴的中间值对齐成分的viewBox的Y轴中间值。
  • 把这一个类比为backrgound-position: 100% 50%;

xMaxYMax

  • 强制统一缩放。
  • 视窗X轴的最大值对齐成分的viewBox的 <min-x> <width>
  • 视窗Y轴的最大值对齐成分的viewBox的 <min-y> <height>
  • 把这么些类比为backrgound-position: 100% 100%;

因而,通过接纳preserveAspectRatio属性的alignmeetOrSlice值,你能够注脚是不是联结缩放viewBox,是还是不是和视窗对齐,在视窗中是或不是整个可知。

有时候,取决于viewBox的尺码,一些值恐怕会产生相似的结果,举个例子在从前viewBox="0 0 200 300"的例证中,一些对齐完全用了分化的align值。那时候就要设置meetOrSlice的值为meet来保证viewBox包含在viewport内。太阳2007娱乐官方网址 11

假设咱们把meetOrSlice的值改成slice,不一致的值大家将获取分化的结果。注意viewBox是如何拉伸来覆盖整个视窗的。x轴被拉伸到用200单位来掩盖视窗800单位。为了到达那些指标,并且维持viewBox的宽高比,y轴在底层被“裁切”,不过你能够想像它在视窗中中度上的延长。太阳2007娱乐官方网址 12

当然,不同的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-*轴和视窗轴的中游对齐。太阳2007娱乐官方网址 13

相互之间演示

要理解viewport, viewBox, 以及分化的preserveAspectRatio值是何等工作的最棒点子是可视化的言传身教。

由于那么些目标,小编创造了叁个简易的并行演示,你能够更换这个属性的值来查看新值导致的结果。太阳2007娱乐官方网址 14

在线案例

本人盼望那篇小说在帮扶您掌握SVG viewport, viewBox, 和 preserveAspectRatio 内容时有功能。假若你想要理解越来越多关于SVG坐标系的剧情,举例嵌套坐标系,建设构造3个新的坐标系以及SVG中的转换,继续阅读那一多级接下去的局地。感激您的翻阅!

2 赞 1 收藏 评论

太阳2007娱乐官方网址 15

TAG标签: www.22138com HTML5
版权声明:本文由太阳集团发布于太阳2007娱乐官方网址,转载请注明出处:   译文出处