SVG-变换

transform变换

translate平移

<svg width="200" height="50">
    <rect x="0" y="0" width="20" height="10" fill="red "/>
    <rect x="0" y="0" width="20" height="10" transform="translate(10, 20)"/>
</svg>

See the Pen svg-example-17 by flqbestboy
(@fanlinqiang) on CodePen.

rotate旋转

// angle 旋转角度，>0 顺时针
// [centerX, centerY] 旋转中心点
rotate(angle, [centerX, centerY])

<svg width="200" height="50">
    <rect x="20" y="0" width="20" height="10" fill="red "/>
    <rect x="20" y="0" width="20" height="10" transform="rotate(30)" fill="green"/>
    <rect x="20" y="0" width="20" height="10" transform="rotate(-180, 20, 10)"/>
</svg>

See the Pen svg-example-18 by flqbestboy
(@fanlinqiang) on CodePen.

scale缩放

// scaleX,scaleY分别表示水平垂直方向的缩放比例，如0.5表示缩小半
// 若无scaleY则，其值默认等于scaleX
scale(scaleX [, scaleY])

<svg width="200" height="50">
    <rect x="20" y="0" width="20" height="10" fill="red "/>
    <rect x="40" y="0" width="20" height="10" transform="scale(0.8)" fill="green"/>
    <rect x="60" y="0" width="20" height="10" transform="scale(1, 2)"/>
</svg>

See the Pen svg-example-19 by flqbestboy
(@fanlinqiang) on CodePen.

skewX和shewY斜切

skewY(angle)
skewX(angle)

<svg width="200" height="50">
    <rect x="20" y="0" width="20" height="40" fill="red" transform="skewY(10) skewX(10)"/>
    <rect x="40" y="0" width="20" height="40" fill="green" transform="skewY(10)"/>
    <rect x="60" y="0" width="20" height="40" transform="skewX(10)"/>
</svg>

See the Pen svg-example-20 by flqbestboy
(@fanlinqiang) on CodePen.