|
可以转换在SVG图像中创建的形状。例如，移动，缩放和旋转形状。这是显示垂直或对角线文本的便捷方法。 转换范例这是一个简单的示例： <svg xmlns =“ http://www./2000/svg”xmlns：xlink =“ http://www./1999/xlink”><rect x =“ 50” y =“ 50” height =“ 110” width =“ 110” style =“ stroke：＃ff0000;填充：#ccccff” transform =“ translate（30）rotation（45 50 50）”></ rect><text x =“ 70” y =“ 100” transform =“ translate（30）rotation（45 50 50）”> Hello World </ text></ svg> 这是结果图像： 
注意和元素transform属性。该属性指定要应用于形状的变换。在此示例中，应用了平移和旋转。两者都将在本文后面解释。
哪些元素可以转换？您可以将变换应用于所有SVG形状。您还可以将变换应用于<g>元素，从而一次性有效地变换整个元素组。也可以变换渐变和填充图案。 转换功能SVG提供四种转换功能： translate（） rotate（） scale（） skew（） matrix（）
以下各节将对这些功能中的每一个进行更详细的说明。 实际上，转换函数不会自行转换SVG形状，而是会转换该形状的基础坐标系。因此，即使宽度以倍数显示，宽度20乘以2的形状在逻辑上仍具有20的宽度。 translate该translate()函数移动形状。您将xand y值传递给translate()参数内部的函数。这是一个例子： translate（50,25） 本示例将形状沿x轴移动50个单位，并沿y轴移动25个单位。 这是一个示例，显示了两个位置相等且大小相等的形状，有无平移： <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）” /> 这是结果图像：
请注意，与第一个（红色）形状相比，第二个（蓝色）形状沿x轴移动75个单位，沿y轴移动25个单位。 rotate该rotate()函数围绕点0,0旋转形状。这是一个示例，显示一个矩形（轮廓）和旋转15度后的相等矩形（实心）： <rect x =“ 20” y =“ 20” width =“ 40” height =“ 40” style =“ stroke：＃3333cc; fill：none;”/><rect x =“ 20” y =“ 20” width =“ 40” height =“ 40” style =“ fill：＃3333cc” transform =“ rotate（15）”/> 这是结果图像：
如果要绕除0,0以外的其他点旋转，则将该点的x和y坐标传递给transform函数。这是一个示例，显示了一个非旋转的矩形（轮廓）和一个相等的矩形（实心）围绕其中心旋转15度： <rect x =“ 20” y =“ 20” width =“ 40” height =“ 40” style =“ stroke：＃3333cc; fill：none;”/><rect x =“ 20” y =“ 20” width =“ 40” height =“ 40” style =“ fill：＃3333cc” transform =“ rotate（15，40，40）”/> 这是结果图像：
所有旋转都是顺时针旋转，其度数从0到360。如果要逆时针旋转，请将负的度数传递给rotate()函数。 scale
该scale()功能按比例放大或缩小形状。该scale()功能可缩放形状尺寸及其位置坐标。因此，以20乘以2的比例缩放的宽度为20且高度为30的矩形位于20,20处，其宽度为40且高度为60。 该scale()功能还可以缩放形状的笔触宽度。 这是一个示例，显示了一个位于10,0处，宽度为20且高度为20的矩形（蓝色），以及一个等比例的矩形（黑色），其缩放比例为2： <rect x =“ 10” y =“ 10” width =“ 20” height =“ 30” style =“ stroke：＃3333cc; fill：none;” /><rect x =“ 10” y =“ 10” width =“ 20” height =“ 30” style =“ stroke：＃000000; fill：none;” transform =“ scale（2） ” /> 这是结果图像：
注意矩形的位置和大小是如何缩放的。 您可以在x轴和y轴上按其他因子缩放形状。scale()为此，您可以向函数提供x-scale和y-scale参数，如下所示： scale（2,3）; 本示例将沿x轴将形状缩放2倍，沿y轴将形状缩放3倍。这是一个例子： <rect x =“ 10” y =“ 10” width =“ 20” height =“ 30” style =“ stroke：＃3333cc; fill：none;” /><rect x =“ 10” y =“ 10” width =“ 20” height =“ 30” style =“ stroke：＃000000; fill：none;” transform =“ scale（2,3） ” /> 这是结果图像：
请注意，缩放后的矩形（黑色）的笔划宽度也是如何缩放的，并且在x轴和y轴上的缩放比例不同。 缩放为镜像功能scale()通过沿x轴或y轴按-1缩放比例，可以将该函数用作镜像函数。完成后，您必须先在x或y方向上移动（平移）该形状，否则镜像的形状将出现在SVG画布的外部。
这是一个例子： <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）” /> 这是在x = 100处绘制的线条的结果图像（因为矩形在x方向上平移了100）。
蓝色是原始形状。黑色形状是平移的缩放比例形状。
Skew的skewX()和skewY()功能偏斜x轴和y轴。实际上，这些功能会根据以度为单位指定的某个角度来倾斜给定的轴。 以下是显示具有不同skewX()值的矩形的一些示例。 <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） ” /> 这是结果图像：
如您所见，该skewX()函数使垂直线看起来像是按给定角度旋转了。因此，该skewY()功能使水平线看起来像是旋转了给定角度。这里有一些例子： <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）” />
Matrix
也可以将转换表示为矩阵。矩阵如下所示： a c e b d f 0 0 1 由于只能指定前6个值，因此只能为矩阵转换函数提供6个值。这是一个例子： transform =“ matrix（a，b，c，d，e，f）” 其他变换函数可以表示为矩阵。这里有些例子： transform 1 0 ty 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 00 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矩阵转换示例： <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）”/> 这是结果图像：
请注意，与左侧（红色）矩形相比，右侧矩形（蓝色）如何转换。 组合转换可以组合转换。您可以通过在transform属性内放置多个转换函数来实现。 这是一个首先平移（移动）然后旋转矩形的示例。该示例显示了在应用任何变换之前和之后（黑色）的矩形（蓝色）。 <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）rotation（30）” /> 这是结果图像：
转换顺序很重要 转换的顺序很重要。在transform属性内指定变换函数的顺序是它们应用于形状的顺序。 以下示例说明了先平移然后旋转，再先旋转然后平移形状之间的区别： <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）rotation（45）” /><rect x =“ 50” y =“ 10” width =“ 20” height =“ 30” style =“ stroke：＃cc3333; stroke-width：2px; fill：none;” transform =“ rotate（45）translate（100,0）” /> 这是结果图像：
黑色矩形未应用任何转换。首先平移蓝色矩形，然后旋转。首先旋转红色矩形，然后平移。
|
