SVG 學習<六> SVG的transform

時間 2019-11-12

標籤 svg 學習 transform 简体版

原文原文鏈接

目錄css

SVG 學習<一>基礎圖形及線段html

SVG 學習<二>進階 SVG世界，視野，視窗 stroke屬性 svg分組svg

SVG 學習<三>漸變wordpress

SVG 學習<四> 基礎APIpost

SVG 學習<五> SVG動畫學習

SVG 學習<六> SVG的transform動畫

SVG 學習<七> SVG的路徑——path(1)直線命令、弧線命令url

SVG 學習<八> SVG的路徑——path(2)貝塞爾曲線命令、光滑貝塞爾曲線命令spa

（轉）利用 SVG 和 CSS3 實現有趣的邊框動畫code

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

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; }