SVG 渐变边框
2024/04/11
共 786 字
约 3 分钟
归档: 技术
用 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
即可
相关代码:
svg 作为背景
在实际应用中,我们把 SVG 单独存起来,作为容器的背景使用。
SVG 做边框:
SVG 做分割线
留言