在CSS中直接使用SVG代码做背景
本帖最后由 马黑黑 于 2025-8-16 12:22 编辑 <br /><br /><div class="codebox" data-prev="1"><style>
.box {
width: 400px;
height: 400px;
background:url('data:image/svg+xml,\
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">\
<circle cx="100" cy="100" r="80" fill="none" stroke="orange" stroke-width="4" />\
<circle cx="100" cy="100" r="50" fill="none" stroke="orange" stroke-width="4" />\
<circle cx="100" cy="100" r="20" fill="none" stroke="orange" stroke-width="4" />\
</svg>') no-repeat center/cover;
margin: 20px auto;
position: relative;
}
</style>
<div class="box"></div>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 本帖最后由 马黑黑 于 2025-8-16 12:25 编辑 <br /><br /><p>符号 \ 是分行写 svg 代码而加入的，如果连在一行写，可以不要，像这样：</p>
<div class="codebox">
background:url('data:image/svg+xml,<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="80" fill="none" stroke="orange" stroke-width="4" /><circle cx="100" cy="100" r="50" fill="none" stroke="orange" stroke-width="4" /><circle cx="100" cy="100" r="20" fill="none" stroke="orange" stroke-width="4" /></svg>') no-repeat center/cover;
</div>
<p>分行写是为了方便阅读和修改。</p> <p>我们可以使用径向渐变背景实现类似的功能：</p>
<div class="codebox" data-prev="1">
<style>
.box {
width: 400px;
height: 400px;
background: repeating-radial-gradient(
transparent 0 6%,
green 6.2% 10%,
transparent 10.2% 20%
);
border-radius: 50%;
margin: 20px auto;
position: relative;
}
</style>
<div class="box"></div>
</div> 这次的径向渐变加了个重复。。
所以本来只看到一条的，现在看到好多条。。
0-6透明，6.2-10绿色，这个0.2是消锯齿用的{:4_173:} 一楼是直接在背景里画同心圆，半径不同，圆心位置100.100，颜色相同。。
这个画了三个就出现了三个。。
花飞飞 发表于 2025-8-16 13:16
一楼是直接在背景里画同心圆，半径不同，圆心位置100.100，颜色相同。。
这个画了三个就出现了三个。。
而且尺寸可以和元素不一致（不过要考虑伸缩的环线大小），同时放大缩小不会失真 花飞飞 发表于 2025-8-16 13:13
这次的径向渐变加了个重复。。
所以本来只看到一条的，现在看到好多条。。
0-6透明，6.2-10绿色，这个0.2 ...
多少条看最后色标比例（或其它尺寸按比例计算）。最后一个颜色最后色标边界 20%，意味着里面的东东按这个比例重复，重复呈现出来的效果则依据元素尺寸和简便图案的设计 用SVG画的圆需要给圆心、半径以及线宽。通过不同半径得到3个同心圆。
重复径向渐变好像更简单点，只要给出透明色和所需颜色的间隔就可以了，通过重复，可以得到一组同心圆。{:4_204:} 红影 发表于 2025-8-16 13:30
用SVG画的圆需要给圆心、半径以及线宽。通过不同半径得到3个同心圆。
重复径向渐变好像更简单点，只要给出 ...
SVG圆更容易掌握，就是代码略多一点点 渐变的那种，每个圆占用的位置接近14%，当然第一个圆很小，这样计算下来就是4道圆环。如果把占比调小，圆环数量还会多点。 漂亮，谢谢马老师经典探索{:4_190:} 马黑黑 发表于 2025-8-16 13:32
SVG圆更容易掌握，就是代码略多一点点
是的，因为更符合常规的思路。 红影 发表于 2025-8-16 18:15
是的，因为更符合常规的思路。
渐变背景也是常规思路的 马黑黑 发表于 2025-8-16 20:09
渐变背景也是常规思路的
svg画圆的过程更容易理解{:4_187:} 马黑黑 发表于 2025-8-16 13:25
而且尺寸可以和元素不一致（不过要考虑伸缩的环线大小），同时放大缩小不会失真
放大小缩不会失真，这个特点太棒了。。 马黑黑 发表于 2025-8-16 13:27
多少条看最后色标比例（或其它尺寸按比例计算）。最后一个颜色最后色标边界 20%，意味着里面的东东按这个 ...
最后色标边界可以决定圈数的多少了，这个好，如果想要多一点或者少一点的圈圈就可以任意设了{:4_173:} 花飞飞 发表于 2025-8-16 20:38
最后色标边界可以决定圈数的多少了，这个好，如果想要多一点或者少一点的圈圈就可以任意设了
但是要计算一下 花飞飞 发表于 2025-8-16 20:36
放大小缩不会失真，这个特点太棒了。。
矢量图SVG 马黑黑 发表于 2025-8-16 21:25
但是要计算一下
根据贴子需要估计一下 马黑黑 发表于 2025-8-16 21:25
矢量图SVG
优势很明显