svg基础变形: transform 之 scale

马黑黑 · 发表于 2023-11-18 08:40

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

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

x

本帖最后由马黑黑于 2023-11-18 08:45 编辑

svg基础变形: transform 之 scale

scale是svg画布内元素的放大或缩小属性，实现原理和CSS的一致，但变形的基点默认情况下总是在svg画布的左上角{0,0}。并且，不像rotate可以自带基点，scale只有xy参数值，即沿XY坐标放大几倍。下面，我们给出一个简单的示例，在200*200的画布上绘制一个位于左上角的小圆，小圆可以通过svg下方的单选按钮选择放大1~5倍，可以通过对其放大，观察其缩放基点：

svg代码：

<svg width="200" height="200" style="border: 1px solid gray;">
	<circle id="Circle" cx="20" cy="20" r="20" fill="tan" transform="scale(1)" />
</svg>

效果：

【伸缩倍数】原始 2倍 3倍 4倍 5倍

如果需要令元素以自己的中心为基点在原地缩放，虽然scale不提供实现方法，我们也不是无能为力。其中的巧妙方法是，先令元素移动（translate）到它的中心点，再缩放（scale），最后再反向移动（translate）先前移动的尺寸。以下示例我们绘制了四个圆，橙色的两个圆初始半径均为 10，然后它们分别按如此方式进行伸缩：scale(1,8)、scale(8,1)，亦即一个垂直放大8倍、一个水平放大8倍；它们放大前放大后均使用 translate 移位处理。看代码和效果：

<svg width="200" height="200" style="border: 1px solid gray;">
	<circle cx="100" cy="100" r="80" fill="lightsteelblue" />
	<circle cx="100" cy="100" r="10" fill="orange" transform="translate(0,100) scale(1,8) translate(0,-100)" />
	<circle cx="100" cy="100" r="10" fill="orange" transform="translate(100,0) scale(8,1) translate(-100,0)" />
	<circle cx="100" cy="100" r="10" fill="steelblue" />
</svg>

从效果中我们可以看到，translate能够帮助我们让元素围绕自己的中心缩放。

【小结】scale只接收xy缩放倍数值，写成 scale(x,y) 或 scale(x)，当 y 缺省时，y = x 。scale不带变形基点参数，若需要元素围绕自己的中心缩放，可以使用 translate 一前一后配套处理：先令元素移动到自己的中心点坐标（基于svg画布坐标体系），缩放后再反向移动回来。