SVG 转换在SVG图像中创建的形状。例如，移动，缩放和旋转形状。这是显示垂直或对角线文本的便捷方法。
一、转换简单示例
例：
xmlns:xlink="
style="stroke:#ff0000; fill: #ccccff" transform="translate(30) rotate(45 50 50)">
>
运行效果：
注：
元素的transform 和 的transform属性。
该属性指定要应用于形状的变换。在此示例中，应用了平移和旋转。两者都将在本文后面解释。
二、哪些元素可以转换？
可以将变换应用于所有SVG形状。还可以将变换应用于 元素，从而一次性有效地变换整个元素组。也可以变换渐变和填充图案。
三、转换函数
转换函数不会自行转换SVG形状，而是会转换该形状的基础坐标系。因此，即使宽度以倍数显示，宽度20乘以2的形状在逻辑上仍具有20的宽度。
1. 移动 translate()
translate()函数移动形状。将x 和 y 值传递给translate()的函数。
translate(50,25)
将形状沿x轴移动50个单位，并沿y轴移动25个单位。显示了两个位置相等且大小相等的形状，有无平移。
例：
运行效果：
注
与第一个（红色）形状相比，第二个（蓝色）形状沿x轴移动75个单位，沿y轴移动25个单位。
2. 旋转 rotate()
rotate()函数围绕点0,0旋转形状。
显示一个矩形（轮廓）和旋转15度后的相等矩形（实心）。
运行效果：
如果要绕除0,0以外的其他点旋转，则将该点的x和y坐标传递给transform函数。
显示了一个非旋转的矩形（轮廓）和一个相等的矩形（实心）围绕其中心旋转15度。
例：
style="stroke: #3333cc; fill:none;"
>
style="fill: #3333cc"
transform="rotate(15, 40, 40)"
>
运行效果：
所有旋转都是顺时针旋转，其度数从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。
运行效果：
注意
矩形的位置和大小是如何缩放的。
可以在x轴和y轴上按其他因子缩放形状。为此，可以向scale()函数提供x-scale和y-scale参数。
如下所示：
scale(2,3);
将沿x轴将形状缩放2倍，沿y轴将形状缩放3倍。
例：
运行效果：
注意：
缩放后的矩形（黑色）的笔划宽度也是如何缩放的，并且在x轴和y轴上的缩放比例不同。
4. 偏斜 skew()
skewX()和skewY()函数偏斜x轴和y轴。实际上，这些函数会根据以度为单位指定的某个角度来倾斜给定的轴。
显示具有不同skewX()值的矩形的一些示例。
运行效果：
skewX()函数使垂直线看起来像是按给定角度旋转了。
因此，skewY()函数使水平线看起来像是旋转了给定角度。
例：
四、总结
本文基于HTML基础，介绍了图像的转换。详细的介绍了如何运用转换函数，进行图像移动、缩放、转动、拉长或拉伸等一系列操作。通过案例的分析，丰富的效果图，能够让读者更好的理解。
希望能够帮助你更好的理解SVG中图像转换。
想学习更多前端、Python爬虫、大数据等计算机知识，请前往： href=" -%X%F%-=' " target="_blank" title="点击进入搜狐首页" id="backsohucom" style="white-space: nowrap;"'>返回搜狐，查看更多
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。