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

SVG序列转换用法示例

在序列转换中, 可以对图形对象执行多个转换。你可以在图形对象上执行平移和缩放。转换A和转换B的结果与转换B和转换A的结果不同。

转换顺序-转换后跟缩放

例:

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500">

<line x1="0" y1="0" x2="0" y2="100" style="stroke: black; stroke-width: 2;"/>
<line x1="0" y1="0" x2="100" y2="0" style="stroke: black; stroke-width: 2;"/>
<rect x="10" y="10" height="20" width="15"
 transform="translate(30, 20) scale(2)"
 style="fill: red;"/>

</svg>
</body>
</html>

立即测试

转换顺序-缩放然后翻译

例:

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500">

<line x1="0" y1="0" x2="0" y2="100" style="stroke: black; stroke-width: 2;"/>
<line x1="0" y1="0" x2="100" y2="0" style="stroke:black; stroke-width: 2;"/>
<rect x="10" y="10" width="20" height="15"
 transform="translate(30, 20) scale(2)" style="fill: gray;"/>

<rect x="10" y="10" width="20" height="15"
 transform="scale(2) translate(30, 20)"
 style="fill: black;"/>

</svg>
</body>
</html>

立即测试

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

评论 抢沙发

评论前必须登录!

 

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

微信扫一扫打赏