个性化阅读
专注于IT技术分析

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="#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>

立即测试

赞(0) 打赏
未经允许不得转载:srcmini » SVG缩放转换用法示例
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏