svg基础变形: transform 之 translate

马黑黑 · 发表于 2023-11-16 20:11

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-11-16 23:51 编辑

svg基础变形: transform 之 translate

和HTML的CSS变形一样，svg也是通过transform属性达成元素的基础变形，主要有如下几种方式：平移（translate）、旋转（rotate）、伸缩（scale）和扭曲（skewX、skewY）。svg的变形属性可用于实体元素，也可用于像 g、pattern、symbol 这样的集合元素。本节仅介绍变形（transform）中的平移（translate）。

先看如下代码：

<svg width="200" height="100" style="border: 1px solid gray;">
	<rect x="10" y="10" width="40" height="40" fill="olive" />
	<rect x="10" y="10" width="40" height="40" transform="translate(150,50)" fill="navy" />
</svg>

以上代码，在 200*100 的svg画布内，绘制了两个矩形，矩形的宽高尺寸一致，定位一致，但第二个海军蓝矩形设置有 transform 属性，transform="translate(150,50)"，根据设置，它应移动到svg右下角。请看效果：

svg的transform属性中，平移 translate 参数的设置原理与CSS一致，都是设置（x,y）平移坐标值，只是svg默认不要单位，默认为像素（CSS必须使用px单位）。同时，和CSS设置的平移一样，简写的svg平移，例如，translate(100)，表示水平移动100px、垂直移动0px。

svg变形中的平移应该是非常简单的，但必须弄清它和CSS的异同：① svg translate 参数值不要单位是默认为px；② svg translate 参数可以简写，简写时和CSS原理一致；③ svg translate 参数如果需要同时设置XY坐标平移值，总是使用全写方式，即 translate(x,y)，CSS则可以单独设置 translateX 或 translateY。