SVG 渐变边框

2024/04/11

共 786 字

约 3 分钟

归档：技术

标签： SVG

用 SVG 实现自适应宽高的渐变边框

渐变边框

渐变边框常见实现方法：

border-image：不支持设置 border-radius
background-image：中间用另一个元素盖住，内圆角不好计算，中间不能透明
background-image + background-clip：让背景延伸到边框，解决了计算内圆角的问题，但中间依然不能透明

参见渐变边框

在 CSS 的世界里，可以说没有原生的渐变边框，最后一种方法根本上也还是背景覆盖，但对 SVG 来说，给 stroke 属性设置一个 linearGradient 元素，即可实现真正的渐变边框。

SVG 的描边

SVG描边是居中描边，不可修改，且自带 overflow:hidden

所以设置 stroke-width 为 1 时，实际上显示的是 0.5px。下面分别是设置 stroke-width=‘1’ 与 border-width=“1” 的效果，可以看到 SVG 的边要更细一些

自适应宽高

给 SVG 设置 width="100%"、height="100%"，放在固定宽高的容器里，即可实现自适应宽高：

虚线与圆角

rx 设置圆角
stroke-dasharray 设置虚线
stroke-dashoffset 设置偏移
stroke-linecap 设置线条两端的形状

动画

SVG 可以内嵌样式，改变 stroke-dashoffset 即可

相关代码：

<div style="width: 160px;height: 80px;">
    <svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
        <style>
            .rect {
                width: calc(100% - 4px);
                height: calc(100% - 4px);
                animation: move .3s infinite linear;
            }
            @keyframes move {
                0% {
                    stroke-dashoffset: 0;
                }
                100% {
                    stroke-dashoffset: 14;
                }
            }
        </style>
        <rect class="rect" x="2" y="2" width="100%" height="100%"
              rx="4" stroke="url(#linear)" 
              stroke-width="2"
              stroke-dasharray="4 4"
              stroke-dashoffset="2"
              stroke-linecap="round"/>
        <defs>
            <linearGradient id="linear" x1="0" y1="0" x2="1" y2="0">
                <stop stop-color="#8F41E9"/>
                <stop offset="1" stop-color="#578AEF"/>
            </linearGradient>
        </defs>
    </svg>
</div>

svg 作为背景

在实际应用中，我们把 SVG 单独存起来，作为容器的背景使用。

SVG 做边框：

SVG 做分割线

.svg-border {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' rx='5' fill='none' stroke='red' /></svg>");
}
.svg-line {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='100%' x2='100%' y2='100%' stroke='red' /></svg>");
}