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>

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>

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>

skewXshewY斜切

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>
posted @ 2019-11-09 15:22  fanlinqiang  阅读(352)  评论(0编辑  收藏  举报