Css 如何在SVG中缩放重复模式？

下面是一个重复的SVG模式：

div{
背景色：#ddd；
高度：140像素；
}

---

仅使用CSS即可轻松完成此操作：

.box{
--s:1；/*使用此按钮控制刻度*/
/*还是这个尺寸*/
--h:100px；
--w:50px；
/**/
高度：100px；
保证金：5px；
边框：1px纯红；
背景：
径向梯度（圆最远侧，#000 19%，透明21%）
计算（var（--s）*（var（--w）/5-var（--w）/2）计算（var（--s）*（var（--h）/10-var（--h）/2），
径向梯度（圆最远侧，#000 19%，透明21%）
计算（var（--s）*（var（--w）/5））0，
径向梯度（圆最远侧，#000 19%，透明21%）
计算（var（--s）*（var（--w）/5-var（--w）/2）计算（var（--s）*（var（--h）/2-var（--h）/10）；
背景尺寸：计算值（var（--w）*var（--s））计算值（var（--h）*var（--s））；
背景重复：重复-x；
}