SVG转换在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）＂   ＞nhooo．com＜／text＞＜／svg＞
    运行效果：
    注：
    ＜rect＞元素的transform 和 ＜text＞的transform属性。
    该属性指定要应用于形状的变换。在此示例中，应用了平移和旋转。两者都将在本文后面解释。
    二、哪些元素可以转换？
    可以将变换应用于所有SVG形状。还可以将变换应用于＜g＞   元素，从而一次性有效地变换整个元素组。也可以变换渐变和填充图案。
    三、转换函数
    转换函数不会自行转换SVG形状，而是会转换该形状的基础坐标系。因此，即使宽度以倍数显示，宽度20乘以2的形状在逻辑上仍具有20的宽度。
    1． 移动 translate（）
    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个单位。
    2． 旋转 rotate（）
    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（）函数。
    3． 缩放 scale（）3．1 scale（）函数简介
    scale（）函数按比例放大或缩小形状。scale（）函数可缩放形状尺寸及其位置坐标。因此，以20乘以2的比例缩放的宽度为20且高度为30的矩形位于20，20处，其宽度为40且高度为60。
    scale（）函数还可以缩放形状的笔触宽度。
    3．2 案例
    显示了一个位于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轴上的缩放比例不同。
    4． 偏斜 skew（）
    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＞
    四、总结
    本文基于HTML基础，介绍了图像的转换。详细的介绍了如何运用转换函数，进行图像移动、缩放、转动、拉长或拉伸等一系列操作。通过案例的分析，丰富的效果图，能够让读者更好的理解。