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>

立即测试
【SVG序列转换用法示例】转换顺序-缩放然后翻译
例：

< !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>

立即测试