本文概述
在缩放变换中, 可以通过缩放坐标系来使对象大于或小于定义时的大小。
均匀缩放图形
均匀缩放转换用于将两个轴的缩放均匀地加倍。
例子
<!DOCTYPE html>
<html>
<body>
<svg width="200px" height="200px" viewBox="0 0 200 200">
<g id="square">
<rect x="20" y="20" width="30" height="30"
style="fill: blue; fill-opacity: .5; stroke: black;"/>
</g>
<use xlink:href="#square" transform="scale(2)"/>
</svg>
</body>
</html>立即测试
解释
在上面的示例中, 网格尚未移动。 (x, y)点仍在同一位置, 但是每个用户坐标现在是以前的两倍。笔划宽度仍然是一个用户单位, 并且该单位现在已变成两倍。这就是为什么较大的正方形的轮廓较粗。
图形的不均匀缩放
在图形的非均匀缩放中, 可以为坐标系的x轴和y轴指定不同的缩放比例。
例子
<!DOCTYPE html>
<html>
<body>
<svg width="200px" height="200px" viewBox="0 0 200 200">
<g id="square">
<rect x="20" y="20" width="30" height="30"
style="fill: blue; fill-opacity: .5; stroke: black;"/>
</g>
<use xlink:href="#square" transform="scale(2)"/>
</svg>
</body>
</html>立即测试
