变换(transform)

前端教程SVG

SVG 的许多元素都支持 transform 属性，用于坐标偏移(translate)、旋转(rotate)、缩放(scale)、倾斜(skew)等。

缩放(scale)

基本语法：

<svg>
    <xxx transform="scale(sx,sy)" />
</svg>

• sx：X轴缩放比例
• sy：Y轴缩放比例
• 如果 sx=sy，可以简写为 scale(s)

scale 示例-1(uniform scale)：

在 Playground 中编辑

全屏预览

复制代码

查看源代码

复制成功

<template>
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="200px" viewBox="0 0 80 80">
        <title>SVG transform scale</title>
        <path
            d="M10,6 Q10,0 15,0T20,6Q20,10 15,14 T10,20Q10,18 5,14T0,6Q0,0 5,0T10,6Z"
            fill="blue"
            transform="scale(4)"
        />
        <path
            d="M10,6 Q10,0 15,0T20,6Q20,10 15,14 T10,20Q10,18 5,14T0,6Q0,0 5,0T10,6Z"
            fill="yellow"
            transform="scale(3)"
        />
        <path
            d="M10,6 Q10,0 15,0T20,6Q20,10 15,14 T10,20Q10,18 5,14T0,6Q0,0 5,0T10,6Z"
            fill="red"
            transform="scale(2)"
        />
        <circle cx="0" cy="0" r="2" fill="green" />
        <text x="2" y="0" fill="green" font-size="8">用户空间原点(0,0)</text>
    </svg>
</template>

<style scoped>
svg {
    overflow: visible;
}
</style>

隐藏源代码

• scale(4) scale(3) scale(2)：分别把心形放大了4 倍、3 倍、2 倍（宽和高都一样）
• 由于是以左上角坐标(0,0) 作为变换原点的，所以红、黄、蓝心形的中心没有对齐

scale 示例-2(中心对齐)：

在 Playground 中编辑

全屏预览

复制代码

查看源代码

复制成功

<template>
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="200px" viewBox="-40 -40 80 80">
        <title>SVG transform scale</title>
        <path
            d="M0,-4 Q0,-10 5,-10T10,-4Q10,0 5,4 T0,10Q0,8 -5,4T-10,-4Q-10,-10 -5,-10T0,-4Z"
            fill="blue"
            transform="scale(4)"
        />
        <path
            d="M0,-4 Q0,-10 5,-10T10,-4Q10,0 5,4 T0,10Q0,8 -5,4T-10,-4Q-10,-10 -5,-10T0,-4Z"
            fill="yellow"
            transform="scale(3)"
        />
        <path
            d="M0,-4 Q0,-10 5,-10T10,-4Q10,0 5,4 T0,10Q0,8 -5,4T-10,-4Q-10,-10 -5,-10T0,-4Z"
            fill="red"
            transform="scale(2)"
        />
        <circle cx="0" cy="0" r="2" fill="green" />
        <text x="2" y="0" fill="green" font-size="8">用户空间原点(0,0)</text>
    </svg>
</template>

<style scoped>
svg {
    overflow: visible;
}
</style>

隐藏源代码

• svg.viewBox="-40 -40 80 80"：把用户坐标往左上角偏移了 40 个单位，因此用户坐标原点处于视口的中心了
• 此例中的 <path> 的坐标都减去了 10 个单位，以便让心形居中

scale 示例-3(不同比例)：

在 Playground 中编辑

全屏预览

复制代码

查看源代码

复制成功

<template>
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="200px" viewBox="-40 -40 80 80">
        <title>SVG transform scale</title>
        <path
            d="M0,-4 Q0,-10 5,-10T10,-4Q10,0 5,4 T0,10Q0,8 -5,4T-10,-4Q-10,-10 -5,-10T0,-4Z"
            fill="blue"
            transform="scale(4,3)"
        />
        <path
            d="M0,-4 Q0,-10 5,-10T10,-4Q10,0 5,4 T0,10Q0,8 -5,4T-10,-4Q-10,-10 -5,-10T0,-4Z"
            fill="yellow"
            transform="scale(3,2)"
        />
        <path
            d="M0,-4 Q0,-10 5,-10T10,-4Q10,0 5,4 T0,10Q0,8 -5,4T-10,-4Q-10,-10 -5,-10T0,-4Z"
            fill="red"
            transform="scale(2,1)"
        />
        <circle cx="0" cy="0" r="2" fill="green" />
        <text x="2" y="0" fill="green" font-size="8">用户空间原点(0,0)</text>
    </svg>
</template>

<style scoped>
svg {
    overflow: visible;
}
</style>

隐藏源代码

• scale(4,3) scale(3,2) scale(2,1)：宽高缩放比例不一样，所以看起来被压扁了

scale 示例-4(翻转)：

在 Playground 中编辑

全屏预览

复制代码

查看源代码

复制成功

<template>
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="200px" viewBox="-40 -40 80 80">
        <title>SVG transform scale</title>
        <path
            d="M0,-4 Q0,-10 5,-10T10,-4Q10,0 5,4 T0,10Q0,8 -5,4T-10,-4Q-10,-10 -5,-10T0,-4Z"
            fill="blue"
            transform="scale(4,-3)"
        />
        <path
            d="M0,-4 Q0,-10 5,-10T10,-4Q10,0 5,4 T0,10Q0,8 -5,4T-10,-4Q-10,-10 -5,-10T0,-4Z"
            fill="yellow"
            transform="scale(3,-2)"
        />
        <path
            d="M0,-4 Q0,-10 5,-10T10,-4Q10,0 5,4 T0,10Q0,8 -5,4T-10,-4Q-10,-10 -5,-10T0,-4Z"
            fill="red"
            transform="scale(2,-1)"
        />
        <circle cx="0" cy="0" r="2" fill="green" />
        <text x="2" y="0" fill="green" font-size="8">用户空间原点(0,0)</text>
    </svg>
</template>

<style scoped>
svg {
    overflow: visible;
}
</style>

隐藏源代码

• scale(4,-3) scale(3,-2) scale(2,-1)：负数的比例会在缩放的同时翻转图形

偏移(translate)

基本语法：

<svg>
    <xxx transform="translate(tx,ty)" />
</svg>

• tx：X轴的偏移量
• ty：Y轴的偏移量，可选，如果忽略，则默认为 0

translate 示例：

在 Playground 中编辑

全屏预览

复制代码

查看源代码

复制成功

<template>
    <svg id="demo-translate-1-left" xmlns="http://www.w3.org/2000/svg" width="45%" height="200px" viewBox="0 0 80 80">
        <title>SVG transform translate</title>
        <path
            d="M10,6 Q10,0 15,0T20,6Q20,10 15,14 T10,20Q10,18 5,14T0,6Q0,0 5,0T10,6Z"
            fill="blue"
            transform="scale(4)"
        />
        <path
            d="M10,6 Q10,0 15,0T20,6Q20,10 15,14 T10,20Q10,18 5,14T0,6Q0,0 5,0T10,6Z"
            fill="yellow"
            transform="scale(3)"
        />
        <path
            d="M10,6 Q10,0 15,0T20,6Q20,10 15,14 T10,20Q10,18 5,14T0,6Q0,0 5,0T10,6Z"
            fill="red"
            transform="scale(2)"
        />
        <circle cx="0" cy="0" r="2" fill="green" />
        <text x="2" y="0" fill="green" font-size="8">用户空间原点(0,0)</text>
    </svg>

    <svg id="demo-translate-1-right" xmlns="http://www.w3.org/2000/svg" width="45%" height="200px" viewBox="0 0 80 80">
        <title>SVG transform translate</title>
        <path
            d="M10,6 Q10,0 15,0T20,6Q20,10 15,14 T10,20Q10,18 5,14T0,6Q0,0 5,0T10,6Z"
            fill="blue"
            transform="scale(4)"
        />
        <path
            d="M10,6 Q10,0 15,0T20,6Q20,10 15,14 T10,20Q10,18 5,14T0,6Q0,0 5,0T10,6Z"
            fill="yellow"
            transform="translate(10, 10) scale(3)"
        />
        <path
            d="M10,6 Q10,0 15,0T20,6Q20,10 15,14 T10,20Q10,18 5,14T0,6Q0,0 5,0T10,6Z"
            fill="red"
            transform="translate(20, 20) scale(2)"
        />
        <circle cx="0" cy="0" r="2" fill="green" />
        <text x="2" y="0" fill="green" font-size="8">用户空间原点(0,0)</text>
    </svg>
</template>

<style scoped>
svg#demo-translate-1-left {
    display: inline-block;
    overflow: visible;
    outline: 1px solid red;
}
svg#demo-translate-1-right {
    margin-left: 10%;
    display: inline-block;
    overflow: visible;
    outline: 1px solid blue;
}
</style>

隐藏源代码

• 右边蓝色框中，使用 translate(10, 10) translate(20, 20) 将黄色、红色心形对齐了。

旋转(rotate)

基本语法：

<svg>
    <xxx transform="rotate(angle[,cx,cy])" />
</svg>

• angle：旋转角度
• cx, cy：旋转原点，可选，默认为用户坐标原点 (0,0)

rotate 示例：

在 Playground 中编辑

全屏预览

复制代码

查看源代码

复制成功

<template>
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="200px" viewBox="0 0 40 40">
        <title>SVG transform rotate</title>
        <path d="M10,6 Q10,0 15,0T20,6Q20,10 15,14 T10,20Q10,18 5,14T0,6Q0,0 5,0T10,6Z" fill="blue" />
        <path
            d="M10,6 Q10,0 15,0T20,6Q20,10 15,14 T10,20Q10,18 5,14T0,6Q0,0 5,0T10,6Z"
            fill="yellow"
            transform="rotate(90, 10, 20)"
        />
        <path
            d="M10,6 Q10,0 15,0T20,6Q20,10 15,14 T10,20Q10,18 5,14T0,6Q0,0 5,0T10,6Z"
            fill="red"
            transform="rotate(180, 10, 20)"
        />
        <path
            d="M10,6 Q10,0 15,0T20,6Q20,10 15,14 T10,20Q10,18 5,14T0,6Q0,0 5,0T10,6Z"
            fill="green"
            transform="rotate(270, 10, 20)"
        />
        <circle cx="0" cy="0" r="2" fill="green" />
        <text x="2" y="0" fill="green" font-size="4">用户空间原点(0,0)</text>
        <circle cx="10" cy="20" r="2" fill="black" />
        <text x="12" y="20" fill="black" font-size="4">旋转原点(10,20)</text>
    </svg>
</template>

<style scoped>
svg {
    overflow: visible;
}
</style>

隐藏源代码

• 黄心 transform="rotate(90, 10, 20)"：以 (10, 20) 作为旋转原点，顺时针旋转了90°；
• 红心 transform="rotate(180, 10, 20)"：以 (10, 20) 作为旋转原点，顺时针旋转了180°；
• 绿心 transform="rotate(270, 10, 20)"：以 (10, 20) 作为旋转原点，顺时针旋转了270°。

倾斜(skewX, skewY)

基本语法：

<svg>
    <xxx transform="skewX(angle)" />
    <xxx transform="skewY(angle)" />
    <xxx transform="skewX(angle) skewY(angle)" />
</svg>

• skewX(angle)：沿着X轴倾斜 angle 角度
• skewX(angle)：沿着Y轴倾斜 angle 角度

示例：

新窗口打开

矩阵(matrix)

transform 坐标变换的本质是使用矩阵 matrix，上面的 scale translate rotate skew 最终都会合并为一个矩阵，然后应用到图形上面。因此，我们也可以直接使用矩阵来变换图形：

基本语法：

<svg>
    <xxx transform="matrix(a,b,c,d,e,f)" />
</svg>

• a,b,c,d,e,f：构成如下的矩阵（(x,y) 为原始坐标，(x',y') 是经过矩阵变换后的坐标）：

矩阵计算公式

展开公式

小结

本节我们学会使用 transform 进行某个图形的坐标变换，下节我们开始学习如何复用 SVG 代码。