编辑这个页面须要登录或更高权限！
- 您刚才的请求只有这个用户组的用户才能使用：自动确认用户
- 如果您还没有登录请登录后重试。编程那点事是一个开放式网站，修改本站大部分内容仅须要花10秒钟时间创建一个账户。 如果您已经登录，本页面可能是受保护的内容。如果您认为有修改的必要，请联系本站管理人员。
- 该页面已被锁定以防止编辑。
SVG 转换
SVG 转换在SVG图像中创建的形状。例如，移动，缩放和旋转形状。这是显示垂直或对角线文本的便捷方法。
转换示例
这是一个简单的示例：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="50" y="50" height="110" width="110" style="stroke:#ff0000; fill: #ccccff" transform="translate(30) rotate(45 50 50)" > </rect> <text x="70" y="100" transform="translate(30) rotate(45 50 50)" >(cainiaojc.com)</text> </svg>测试看看‹/›
运行后图像效果：
注意<rect>元素的transform 和 <text>的transform属性。该属性指定要应用于形状的变换。在此示例中，应用了平移和旋转。两者都将在本文后面解释。
哪些元素可以转换？
您可以将变换应用于所有SVG形状。您还可以将变换应用于<g>
元素，从而一次性有效地变换整个元素组。也可以变换渐变和填充图案。
转换函数
SVG提供四种转换函数：
translate()
rotate()
scale()
skew()
matrix()
以下各节将对这些函数中的每一个进行更详细的说明。
实际上，转换函数不会自行转换SVG形状，而是会转换该形状的基础坐标系。因此，即使宽度以倍数显示，宽度20乘以2的形状在逻辑上仍具有20的宽度。
移动
translate()函数移动形状。您将x 和 y 值传递给translate()的函数。这是一个示例：
translate(50,25)
本示例将形状沿x轴移动50个单位，并沿y轴移动25个单位。
这是一个示例，显示了两个位置相等且大小相等的形状，有无平移：
<svg width="500" height="150"> <rect x="20" y="20" width="50" height="50" style="fill: #cc3333"/> <rect x="20" y="20" width="50" height="50" style="fill: #3333cc" transform="translate(75,25)"></rect> </svg>测试看看‹/›
运行后图像效果：
请注意，与第一个（红色）形状相比，第二个（蓝色）形状沿x轴移动75个单位，沿y轴移动25个单位。
旋转
rotate()函数围绕点0,0旋转形状。这是一个示例，显示一个矩形（轮廓）和旋转15度后的相等矩形（实心）：
<svg width="500" height="150"> <rect x="20" y="20" width="40" height="40" style="stroke: #3333cc; fill:none;" ></rect> <rect x="20" y="20" width="40" height="40" style="fill: #3333cc" transform="rotate(15)" ></rect> </svg>测试看看‹/›
运行后图像效果：
如果要绕除0,0以外的其他点旋转，则将该点的x和y坐标传递给transform函数。这是一个示例，显示了一个非旋转的矩形（轮廓）和一个相等的矩形（实心）围绕其中心旋转15度：
<svg width="500" height="150"> <rect x="20" y="20" width="40" height="40" style="stroke: #3333cc; fill:none;" ></rect> <rect x="20" y="20" width="40" height="40" style="fill: #3333cc" transform="rotate(15, 40, 40)" ></rect> </svg>测试看看‹/›
运行后图像效果：
所有旋转都是顺时针旋转，其度数从0到360。如果要逆时针旋转，请将负的度数传递给rotate()函数。
缩放
scale()函数按比例放大或缩小形状。scale()函数可缩放形状尺寸及其位置坐标。因此，以20乘以2的比例缩放的宽度为20且高度为30的矩形位于20,20处，其宽度为40且高度为60。
scale()函数还可以缩放形状的笔触宽度。
这是一个示例，显示了一个位于10,0处，宽度为20且高度为20的矩形（蓝色），以及一个等比例的矩形（黑色），其缩放比例为2：
<svg width="500" height="150"> <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;"></rect> <rect x="10" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2)"></rect> </svg>测试看看‹/›
运行后图像效果：
注意矩形的位置和大小是如何缩放的。
您可以在x轴和y轴上按其他因子缩放形状。为此，您可以向scale()函数提供x-scale和y-scale参数，如下所示：
scale(2,3);
本示例将沿x轴将形状缩放2倍，沿y轴将形状缩放3倍。这是一个示例：
<svg width="500" height="150"> <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;"></rect> <rect x="10" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2,3)"></rect> </svg>测试看看‹/›
运行后图像效果：
请注意，缩放后的矩形（黑色）的笔划宽度也是如何缩放的，并且在x轴和y轴上的缩放比例不同。
缩放为镜像函数
scale()通过沿x轴或y轴按-1缩放比例，
可以将该函数用作镜像函数。完成后，您必须先在x或y方向上移动（平移）该形状，否则镜像的形状将出现在SVG画布的外部。
这是一个示例：
<svg width="500" height="150"> <path d="M20,20 l20,20 l0,20 l-20,20 Z" style="stroke: #3333cc; fill:none;" /> <path d="M20,20 l20,20 l0,20 l-20,20 Z" style="stroke: #000000; fill:none;" transform="translate(100, 0) scale(-1, 1) " /></svg>测试看看‹/›
这是在x = 100处绘制的线条的结果图像（因为矩形在x方向上平移了100）。
蓝色是原始形状。黑色形状是平移的缩放比例形状。
偏斜
skewX()和skewY()函数偏斜x轴和y轴。实际上，这些函数会根据以度为单位指定的某个角度来倾斜给定的轴。
以下是显示具有不同skewX()值的矩形的一些示例。
<svg width="500" height="150"> <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" /> <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(10)" /> <rect x="100" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(45)" /> <rect x="150" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(60)" /></svg>测试看看‹/›
运行后图像效果：
正如您看到的，skewX()函数使垂直线看起来像是按给定角度旋转了。因此，skewY()函数使水平线看起来像是旋转了给定角度。这里有一些示例：
<svg width="500" height="150"> <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" /> <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewY(60)" /> <rect x="100" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewY(45)" /> <rect x="150" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewY(10)" /></svg>测试看看‹/›
矩阵
也可以将转换表示为矩阵。矩阵如下所示：
a c e b d f 0 0 1
由于只能指定前6个值，因此只能为矩阵转换函数提供6个值。这是一个示例：
transform="matrix(a,b,c,d,e,f)"
其他变换函数可以表示为矩阵。这里有些示例：
Translate 1 0 tx 0 1 ty 0 0 1 matrix(1,0,0,1,tx,ty)
Rotate cos(a) -sin(a) 0 sin(a) cos(a) 0 0 0 1 matrix( cos(a), sin(a),-sin(a),cos(a),0,0 )
注：该值cos(a)和sin(a)具有插入基质之前预先计算。该参数a是旋转角度。
Scale sx 0 0 0 sy 0 0 0 1 matrix(sx,0,0,sy,0,0)
沿x轴的偏斜变换可以写为：
Skew 1 tan(a) 0 0 1 0 0 0 1 matrix(1,0,tan(a),1,0,0)
tan(a)值在插入matrix()函数之前必须预先计算。
沿y轴的偏斜变换可以表示为：
Skew 1 0 0 tan(a) 1 0 0 0 1 matrix(1,tan(a),0,1,0,0)
这是一个模仿简单转换功能的SVG矩阵转换示例：
<svg width="500" height="150"> <rect x="20" y="20" width="50" height="50" style="fill: #cc3333"/> <rect x="20" y="20" width="50" height="50" style="fill: #3333cc" transform="matrix(1,0,0,1,100,20)" /> </svg>测试看看‹/›
运行后图像效果：
请注意，与左侧（红色）矩形相比，右侧矩形（蓝色）如何转换。
组合转换
可以组合转换。您可以通过在transform属性内放置多个转换函数来实现。
这是一个首先平移（移动）然后旋转矩形的示例。该示例显示了在应用任何变换之前和之后（黑色）的矩形（蓝色）。
<svg width="500" height="150"> <rect x="50" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" /> <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="translate(50,0) rotate(30)" /> </svg>测试看看‹/›
运行后图像效果：
转换顺序很重要
转换的顺序很重要。在transform属性内指定变换函数的顺序是它们应用于形状的顺序。
以下示例说明了先平移然后旋转，再先旋转然后平移形状之间的区别：
<svg width="500" height="150"> <rect x="50" y="10" width="20" height="30" style="stroke: #000000; stroke-width: 2px; fill:none;" /> <rect x="50" y="10" width="20" height="30" style="stroke: #3333cc; stroke-width: 2px; fill:none;" transform="translate(100,0) rotate(45)" /> <rect x="50" y="10" width="20" height="30" style="stroke: #cc3333; stroke-width: 2px; fill:none;" transform="rotate(45) translate(100,0)" /> </svg>测试看看‹/›
运行后图像效果：
黑色矩形未应用任何转换。首先平移蓝色矩形，然后旋转。首先旋转红色矩形，然后平移。
- Copyright © 2003-2013 菜鸟教程。
- 版权与免责声明
