请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
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>
效果:
如果需要令元素以自己的中心为基点在原地缩放,虽然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画布坐标体系),缩放后再反向移动回来。
|