zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    C#计算两个时间年份月份天数(根据生日计算年龄)差,求时间间隔
    C#四舍五入保留一位小数
    给Editplus去掉.bak文件
    $().each() 与 $.each()解析
    VS 2013+Qt 5.4.1
    HDU 5228 ZCC loves straight flush( BestCoder Round #41)
    产品经理的修炼:如何把梳子卖给和尚
    c++ STL unique , unique_copy函数
    linux定时备份mysql数据库文件
    Python——异常基础
  • 原文地址:https://www.cnblogs.com/fanlinqiang/p/11826125.html
Copyright © 2011-2022 走看看