SVG 学习<六> SVG的transform

时间：2017-09-08 17:07:15 阅读：459 评论：0 收藏：0 [点我收藏+]

SVG元素也有transform属性，位移、缩放、倾斜、旋转。

这次一次性把代码都贴出来算了。

HTML代码

    <svg xmlns="http://www.w3.org/2000/svg">
        <rect class="No1" />
        <rect class="No2" />
        <rect class="No3" />
        <rect class="No4" />
        <rect class="No5" />
        <rect class="No6" />
        <rect class="No7" transform="rotate(90,885 60)"/>
    </svg>

css代码

        /**/
        .No1{ x:10px;y:10px;width:150px;height:100px;fill:rgb(255,150,0);stroke:none;transition:1s all; }
        svg:hover .No1{ transform: translate(50px, 50px); }
        /**/
        .No2{ x:170px;y:10px;width:150px;height:100px;fill:rgb(0,250,255);stroke:none;transition:1s all; }
        svg:hover .No2{ transform: rotateX(90deg); }
        /**/
        .No3{ x:330px;y:10px;width:150px;height:100px;fill:rgb(255,255,0);stroke:none;transition:1s all; }
        svg:hover .No3{ transform: rotateY(90deg); }
        /**/
        .No4{ x:490px;y:10px;width:150px;height:100px;fill:rgb(255,0,0);stroke:none;transition:1s all; }
        svg:hover .No4{ transform: rotate(88deg); }
        /**/
        .No5{ x:650px;y:10px;width:150px;height:100px;fill:rgb(0,255,0);stroke:none;transition:1s all; }
        svg:hover .No5{ transform: skew(45deg); }
        /**/
        .No6{ x:10px;y:120px;width:150px;height:100px;fill:pink;stroke:none;transition:1s all; }
        svg:hover .No6{ transform: scale(1.5,1.5); } 
        /**/
        .No7{ x:810px;y:10px;width:150px;height:100px;fill:rgb(0,0,255);stroke:none; }