svg按钮渐变边框

共用css

css 复制代码

body {
    padding: 50px;
    background-color: black;
    color: white;
}

svg {
    --text_fill: orange;
    --svg_width: 120px;
    --svg_height: 40px;
    width: var(--svg_width);
    height: var(--svg_height);
    cursor: pointer;
    /* 创建图层 */
    will-change: transform;

    &:hover {
        --text_fill: #fed71a;
    }

    text {
        fill: var(--text_fill);
        font-size: 1rem;
        transform: translate(50%, 50%);
        text-anchor: middle;
        dominant-baseline: middle;
        stroke: yellowgreen;
        stroke-width: .5px;
        cursor: pointer;
    }

    rect {
        --stroke_width: 4px;
        width: calc(var(--svg_width) - var(--stroke_width));
        height: calc(var(--svg_height) - var(--stroke_width));
        stroke-width: var(--stroke_width);
        rx: calc(var(--svg_height)/2);
        x: calc(var(--stroke_width)/2);
        y: calc(var(--stroke_width)/2);
        fill: none;
        cursor: pointer;
    }
}

移入执行、移出暂停

html 复制代码

<body>
    <svg style='position:absolute;left:-9999px;width:0;height:0;visibility:hidden;'>
        <defs>
            <linearGradient id='strokeColor1' x1='0%' y1='0%' x2='100%' y2='0%'>
                <stop offset='0%' stop-color="#00ccff" stop-opacity="1" />
                <stop offset='50%' stop-color="#d400d4" stop-opacity="1" />
                <stop offset='100%' stop-color="#ff00ff" stop-opacity=".7" />
            </linearGradient>
        </defs>
    </svg>

    <svg id="svg1">
        <text>渐变按钮</text>
        <rect stroke='url(#strokeColor1)' />
        <animateTransform id="ani1" href="#strokeColor1" attributeName='gradientTransform' dur='5s' type="rotate"
            form="0,.5,.5" to="360,.5,.5" repeatCount='indefinite' begin="indefinite" />
    </svg>
</body> 
<script>
    svg1.addEventListener('mouseover', function () {
        if (!this.beginMark) {
            ani1.beginElement();
            this.beginMark = true;
            return;
        }
        this.unpauseAnimations();
    })

    svg1.addEventListener('mouseleave', function () {
        this.pauseAnimations();
    })
</script>

svg1效果图

移入暂停、移出执行

html 复制代码

<body>
    <svg style='position:absolute;left:-9999px;width:0;height:0;visibility:hidden;'>
        <defs>
            <linearGradient id='strokeColor2' x1='0%' y1='0%' x2='100%' y2='0%'>
                <stop offset='0%' stop-color="#ec261b" />
                <stop offset='50%' stop-color="#ff9f43" />
                <stop offset='100%' stop-color="#ffe66d" stop-opacity="1" />
            </linearGradient>
        </defs>
    </svg>

    <svg id="svg2">
        <text>渐变按钮</text>
        <rect stroke='url(#strokeColor2)' />
        <animateTransform id="ani2" href="#strokeColor2" attributeName='gradientTransform' dur='5s' type="rotate"
            form="0,.5,.5" to="360,.5,.5" repeatCount='indefinite' begin="0s" />
    </svg>
</body>

<script>
    svg2.addEventListener('mouseover', function () {
        this.pauseAnimations();
    })
    svg2.addEventListener('mouseleave', function () {
        this.unpauseAnimations();
    })
</script>

sv2效果图

总结

个人感觉svg实现渐变边框相比较css的实现来说，相对代码量更大一些，但是svg其实还有很多好玩的地方。用svg来做渐变边框也是另外的一种思路，也许以后能够用的上。