master

分支 (2)

管理

管理

master

dev

front-end
/
svg.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>svg动画</title>
</head>

<body>
    <style>
        svg {
            /* width: 200px; */
            /* display: block; */
            /* position: absolute; */
        }

        .path {
            stroke-dasharray: 160;
            stroke-dashoffset: -80;
            animation: dash 1s linear forwards;
        }

        @keyframes dash {
            from {
                stroke-dasharray: 160;
                stroke-dashoffset: -80;
            }

            to {
                stroke-dasharray: 320;
                stroke-dashoffset: 0;
            }
        }
    </style>
    <div>
        <svg width="320px" height="175px" version="1.1">
            <path id="path" fill="transparent" stroke="#000000" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80"
                class="path"></path>
        </svg>
    </div>

    <script>
        console.log(document.getElementById('path').getTotalLength())
    </script>

    <div class="rect-box">
        <style>
            .rect-box {
                position: relative;
                width: 180px;
                height: 48px;
                line-height: 48px;
            }

            .rect {
                position: absolute;
                top: 0;
                left: 0;
            }

            .rect:hover #rect {
                animation: rect 1s linear forwards;
            }

            .text-btn {
                display: block;
                text-align: center;
            }

            /* 478 */
            #rect {
                stroke-dasharray: 100 378;
                stroke-dashoffset: -85;

            }

            @keyframes rect {
                0% {
                    stroke-dasharray: 100 378;
                    stroke-dashoffset: -85;
                }

                100% {
                    stroke-dasharray: 478;
                    stroke-dashoffset: 0;
                }
            }
        </style>
        <div class="text-btn">按钮</div>
        <!-- 按钮 -->
        <svg class="rect" width="214px" height="48px" viewBox="0 0 214 48" version="1.1"
            xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <title>矩形备份 16</title>
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" color="red">
                <!-- M L Z 闭合-->
                <path d="M211.55468,1 L190.591078,47 L2.44531991,47 L23.4089216,1 L211.55468,1 Z" id="rect"
                    stroke="#005EBD" stroke-width="2">
                </path>
            </g>
        </svg>
        <script>
            // console.log(document.getElementById('rect').getTotalLength())
        </script>
    </div>

    <!-- 画直线 -->
    <svg width="1200" height="630">
        <line y1="100" x1="100" y2="200" x2="200" stroke="#FFB6C1" transform="translate(110,110)" />
        <line y1="0" x1=" 0" y2="200" x2="200" stroke="#000" fill="red" />
    </svg>

    <!-- 动画 -->
    <style>
        svg>rect{
            transform-box: fill-box;
            transform-origin: center center;
        }
    </style>
    <svg width=500 height=500>
        <rect id="yy" x=100 y=100 width = 100 height = 100  stroke="red" fill="green">
    </svg>
    <button onclick="change()">特效</button>
    <script>
        let rectSvgEle = document.querySelector("#yy");
        let diataAngle = 10;
        let change =()=>{
            diataAngle++;
            rectSvgEle.setAttribute('transform',`rotate(${diataAngle})`)
        }
    </script>
</body>

</html>