wap SVG 第五章 转换坐标系

到了这一点，所有的图形被显示的“是”。会有的时候，当你有一个图形，你想移动到新的位置，旋转，或规模。为了完成这些任务，您可以添加适当的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. 所有Ÿ坐标由指定的角度倾斜。在视觉上，这使得出现水平线的角度。

笔记

1. ↑本章中所有的数字静态图片。这其中显示了两个正方形，一个旋转和不旋转。要显示一个旋转广场的动画，使用的<animateTransform>，我们将在第11章中讨论，在第11.6节。
2. ↑这是静态图片，“方靶心。” 如果你想显示的动画扩大广场，你会使用的<animateTransform>，我们将在第11章中讨论，在第11.6节。