到了这一点,所有的图形被显示的“是”。会有的时候,当你有一个图形,你想移动到新的位置,旋转,或规模。为了完成这些任务,您可以添加适当的SVG元素变换属性。本章将探讨这些变革的细节。
翻译转型
在第4章中,你看到了,你可以用x和y的属性与<use>元素在一个特定的地方放置一组图形对象。在实施例5-1中的SVG看,它定义了一个正方形,并将其绘制在网格的左上角,然后重新将其绘制的左上角坐标(50,50)。如图5-1中的虚线是不是SVG的一部分,但足以说明,我们感兴趣的部分画布
<svg width="200px" height="200px" viewBox="0 0 200 200">
<g id="square">
<rect x="0" y="0" width="20" height="20"
style="fill: black; stroke-width: 2;"/>
</g>
<use xlink:href="#square" x="50" y="50"/>
</svg>
事实证明,x 和y的值是真的更普遍和更强大的变换属性的简写形式之一。具体来说,x 和y的值都转换为一个属性,如transform="translate( x-value, y-value )"变换=“翻译( x值,y值 )“ ,其中翻译是一个花哨的技术术语为“移动”。在当前用户坐标系的x值和y值计量。让我们用变换以获得相同的效果,第二个正方形的左上角(50,50)。例5-2列出了SVG。
<svg width="200px" height="200px" viewBox="0 0 200 200">
<g id="square">
<rect x="0" y="0" width="20" height="20"
style="fill: none; stroke:black; stroke-width: 2;"/>
</g>
<use xlink:href="#square" transform="translate(50,50)"/>
</svg>
显示的结果完全一样,在图5-1。你可能认为这是通过移动的平方,到不同的地方对电网概念在图5-2所示,但你就错了。
注意
translate 在文章中叫做翻译 ,translate从来没改变做网格坐标,而是改变了在网格上面的位置,
乍一看,使用翻译似乎荒谬的,而且效率低下,因为通过移动整个客厅,墙壁和所有移动你的沙发,进一步远离外墙的房子,到一个新的位置。事实上,如果翻译是唯一的改造,移动整个坐标系将是浪费。然而,我们很快就会看到其他转换,组合序列的转换,这是数学和更方便的概念,它们是否适用于整个坐标系。
看看还有没有其他的转换
大规模改造
这是可能的,以使对象出现在它被定义的缩放坐标系的大小大于或小于。这种转变被指定为:
transform="scale( value )" 变换="规模(值)"
相乘所有X-Y坐标给定值
transform="scale( x-value , y-value )" 变换="规模(x-值,y-值)"
所有的X坐标乘以给定的X值和所有Y坐标Y值
实施例5-3是第一种,均匀地加倍规模为两个轴的缩放变换的一个例子。再次,如图5-4中的虚线是没有在SVG,他们只是需要注意的是正方形的左上角是(10,10)我们感兴趣的画布显示面积。
<svg width="200px" height="200px" viewBox="0 0 200 200">
<g id="square">
<rect x="10" y="10" width="20" height="20"
style="fill: none; stroke: black;"/>
</g>
<use xlink:href="#square" transform="scale(2)"/>
</svg>
你可能会想,“等一下-我能理解为什么广场上得到了较大的,但我不问了翻译,那么,为什么在不同的地方是正方形?“ 当你在图5-5中看到实际发生时,一切都变得清晰。没有移动网格(0,0)点的坐标系统仍然是在同一个地方,但每个用户的坐标是现在的两倍大,因为它曾经是。你可以看到从网格线的矩形的左上角(10,10)仍是新的,更大的网格上,因为对象一定的移动。这也解释了为什么大正方形的轮廓是较厚。笔划的宽度仍然是一个用户单元,但现在已经成为该单元的两倍大,所以行程变稠。
注意
缩放变换不会改变图形对象的网格坐标或笔画宽度,而是它改变了就到画布大小的坐标系统(电网)。
这是可能的x -轴和y -轴的坐标系来指定一个不同的比例因子,通过尺度变换的第二种形式中的实施例5-4的平方与三个因素缩放的x轴绘制Ý轴缩放的一个半的一个因素。正如你可以看到在图5-6中,一个单元笔画宽度也是非均匀缩放。
<svg width="200px" height="200px" viewBox="0 0 200 200">
<g id="square">
<rect x="10" y="10" width="20" height="20"
style="fill: none; stroke: black;"/>
</g>
<use xlink:href="#square" transform="scale(3, 1.5)"/>
</svg> 非均匀的缩放图形
这一点,我们只应用于变换属性的<use>元素的。通过将它们分组,转化组,您可以将一系列元素转化:
<g id="group1" transform="translate(3, 5)">
<line x1="10" y1="10" x1="30" y2="30"/>
<circle cx="20" cy="20" r="10"/>
</g>
<g transform="scale(10,1)">
<rect x="15" y="20" width="100" height="50"
style="fill: none; stroke: green;" stroke-width="1" />
</g>
这2个比较一下啊
放的矩形的宽度和高度应是三次未缩放的矩形大,这是相当清楚。然而,你可能不知道,如果x - y坐标的矩形缩放之前或之后进行评估。答案是SVG适用于转换的坐标系统,在评估任何形状的坐标。例5-5 SVG缩放的矩形,未缩放的坐标系统中的网格线绘制图5-7所示。
<!-- draw axes -->
<line x1="0" y1="0" x2="0" y2="100" style="stroke: gray;"/>
<line x1="0" y1="0" x2="100" y2="0" style="stroke: gray;"/>
<rect x="10" y="10" height="20" width="15"
transform="translate(30, 20) scale(2)"
style="fill: gray;"/>
转换序列
这是可以做到在图形对象上的一个以上的变换。你只要把转变,由空格分隔,变换属性的值。这里是一个经历了两个转变,翻译后跟比例的矩形。(轴显示绘制矩形,的确,移动)。
<!-- draw axes -->
<line x1="0" y1="0" x2="0" y2="100" style="stroke: gray;"/>
<line x1="0" y1="0" x2="100" y2="0" style="stroke: gray;"/>
<rect x="10" y="10" width="20" height="15"
transform="translate(30, 20) scale(2)" style="fill: #ccc;"/>
<rect x="10" y="10" width="20" height="15"
transform="scale(2) translate(30, 20)"
style="fill: black;"/>
这相当于嵌套组按以下顺序,你所看到的图5-8中,都将产生。
究其原因,黑色的矩形结束了从原点越远的是,首先应用缩放,从而使翻译是现在的两倍的单位,20个单位的x -方向和10单位Ý方向做大,如图5-11所示。
从笛卡尔坐标转换
<svg width="200px" height="200px" viewBox="0 0 200 200"> <!-- axes --> <line x1="0" y1="0" x2="100" y2="0" style="stroke: black;"/> <line x1="0" y1="0" x2="0" y2="100" style="stroke: black;"/> <!-- trapezoid --> <polygon points="40 40, 100 40, 70 70, 40 70" style="fill: gray; stroke: black;"/> </svg>
旋转变换
另外,也可以通过一个指定的角度旋转的坐标系。在默认的坐标系统中,角度测量增加旋转顺时针方向旋转,有横线具有的角度为零度,如在图5-15中示出。
除非你指定,否则,旋转中心(看中了长期的“支点”)被推定为(0,0)。例5-9显示了灰色绘制一个正方形,然后再绘制黑色坐标系后旋转45度。轴也显示为导向。图5-16显示了结果。如果你很惊讶,广场上已经出现移动,你不应该的。请记住,在整个坐标系统已经被旋转,如图5-17所示。[1]
<polyline points="100 0, 0, 0 100" style="stroke: black; fill: none;"/>
<rect x="70" y="30" width="20" height="20" style="fill: gray;"/>
<rect x="70" y="30" width="20" height="20" transform="rotate(55)" style="fill: black;"/>
大多数时候,你不会要围绕原点旋转整个坐标系,你会想要一个单一的对象以外的起源点周围旋转。你可以做到这一点,通过这一系列的转换:旋转(角度 )翻译(翻译( 的centerX 项CenterY ) - 的centerX , - 项CenterY )translate( centerX , centerY ) rotate( angle ) translate(- centerX , - centerY )。SVG提供了另一个版本的旋转使这个共同的任务更容易。在这第二种形式的旋转变换,指定要旋转的角度和中心点周围:
rotate(angle, centerX, centerY)
angle表示圆心角度
这样做的效果暂时在指定的中心x 和Ý点与原点的坐标建立一个新的系统,这样做的旋转,然后重新建立原始坐标。实施例5-10显示了这种形式的旋转创建多个副本一个箭头,如图5-18所示。
<!-- center of rotation -->
<circle cx="50" cy="50" r="3" style="fill: black;"/>
<!-- non-rotated arrow -->
<g id="arrow" style="stroke: black;">
<line x1="60" y1="50" x2="90" y2="50"/>
<polygon points="90 50, 85 45, 85 55"/>
</g>
<!-- rotated around center point -->
<use xlink:href="#arrow" transform="rotate(60, 50, 50)"/>
<use xlink:href="#arrow" transform="rotate(-90, 50, 50)"/>
<use xlink:href="#arrow" transform="rotate(-150, 50 50)"/>
围绕一个中心缩放技术
虽然可以绕原点的点以外,也没有相应的能力,围绕一个点扩展。不过,您可以用一个简单的一系列的变革使同心符号。缩放对象由给定的因素围绕一个中心点,这样做:
可以这么做
translate(-centerX*(factor-1), -centerY*(factor-1))
scale(factor)
您可能还需要来划分中风宽度比例因子,使轮廓宽度保持不变,而对象变得更大。例5-11绘制一套同心矩形,如图5-19所示。
<!-- center of scaling -->
<circle cx="50" cy="50" r="2" style="fill: black;"/>
<!-- non-scaled rectangle -->
<g id="box" style="stroke: black; fill: none;">
<rect x="35" y="40" width="30" height="20"/>
</g>
<use xlink:href="#box" transform="translate(-50,-50) scale(2)"
style="stroke-width: 0.5;"/>
<use xlink:href="#box" transform="translate(-75,-75) scale(2.5)"
style="stroke-width: 0.4;"/>
<use xlink:href="#box" transform="translate(-100,-100) scale(3)"
style="stroke-width: 0.33;"/>
skewx和skewy转换
SVG也有其他两个的转变:skewX skewY,让你歪斜轴之一。一般的形式为skewX( 角度 )和skewY( 角度 )的skewX变换“推”的所有的X坐标的指定的角度,而y轴坐标不变。skewY倾斜Ý坐标,使x坐标不变,如图示例5-12。
<g style="stroke: gray; stroke-dasharray: 4 4;">
<line x1="0" y1="0" x2="200" y2="0"/>
<line x1="20" y1="0" x2="20" y2="90"/>
<line x1="120" y1="0" x2="120" y2="90"/>
</g>
<g transform="translate(20, 0)"> [2]
<g transform="skewX(30)"> [3]
<polyline points="50 0, 0 0, 0 50" [4]
style="fill: none; stroke: black; stroke-width: 2;"/>
<text x="0" y="60">skewX</text> [5]
</g>
</g>
<g transform="translate(120, 0)"> [6]
<g transform="skewY(30)">
<polyline points="50 0, 0 0, 0 50"
style="fill: none; stroke: black; stroke-width: 2;"/>
<text x="0" y="60">skewY</text>
</g>
</g>
[1]这些虚线绘制在默认坐标系统中,任何转换之前发生。
[2]这将移动整个倾斜的“包”到所需的位置。
[3]斜的x坐标为30度。此变换并不改变,这将仍然是在(0,0)在新的坐标系的原点。
[4]为了方便起见,我们拉拢的对象在原点。
[5]文本将覆盖在第8章中更详细。
[6]这些元素组成的前面的完全一样,除了Ý坐标歪斜。
请注意,叶skewX水平图5-20水平线,垂直线skewY离开不变。去的身影。
SVG transformations 汇总
Transformation | Description |
---|---|
translate(x,y) | Moves the user coordinate system by the specified x and y amounts. Note: If you don't specify a y value, zero is assumed. 移动用户坐标系,由指定的x Ÿ金额的。注意:如果你不指定一个y值,假设为零。 |
scale(xFactor,yFactor) | Multiplies all user coordinate systems by the specified xFactor and yFactor. The factors may be fractional or negative. 所有的用户坐标系统相乘,由指定的选秀yFactor的。因素可能是分数或负。 |
scale(factor) | Same as scale(factor,factor). 规模相同(因子,因子)。 |
rotate(angle) | Rotates the user coordinate by the specified angle. The center of rotation is the origin (0, 0). In the default coordinate system, angle measure increases as you rotate clockwise, with a horizontal line having an angle of zero degrees. 旋转用户坐标由指定的角度。的旋转中心为原点(0,0)。在默认的坐标系统中,随着顺时针旋转角度测量,具有的角度为零度的一条水平线。 |
rotate(angle,centerX,centerY) | Rotates the user coordinate by the specified angle. centerX and centerY specify the center of rotation. 由指定的角度旋转用户坐标的centerX 项CenterY指定的旋转中心。 |
skewX(angle) | Skews all x-coordinates by the specified angle. Visually, this makes vertical lines appear at an angle. 歪曲所有的x坐标指定的角度。在视觉上,这使得垂直线出现在一个角度。 |
skewY(angle) | Skews all y-coordinates by the specified angle. Visually, this makes horizontal lines appear at an angle. 所有Ÿ坐标由指定的角度倾斜。在视觉上,这使得出现水平线的角度。 |
笔记
- ↑本章中所有的数字静态图片。这其中显示了两个正方形,一个旋转和不旋转。要显示一个旋转广场的动画,使用的<animateTransform>,我们将在第11章中讨论,在第11.6节。
- ↑这是静态图片,“方靶心。” 如果你想显示的动画扩大广场,你会使用的<animateTransform>,我们将在第11章中讨论,在第11.6节。