SVG缩放转换用法示例

本文概述

均匀缩放图形
解释
图形的不均匀缩放

【SVG缩放转换用法示例】在缩放变换中, 可以通过缩放坐标系来使对象大于或小于定义时的大小。
均匀缩放图形均匀缩放转换用于将两个轴的缩放均匀地加倍。
例子

< !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="http://www.srcmini.com/#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="http://www.srcmini.com/#square" transform="scale(2)"/> < /svg> < /body> < /html>

立即测试