使用渐变并禁用重复项可避免这种情况：
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="rgb(255,120,50)" style="background:linear-gradient(rgb(255,255,102),rgb(255,102)) no-repeat ; border-radius: 0%">
<path d="M8 11.5c0-.83-.67-1.5-1.5-1.5S5 10.67 5 11.5 5.67 13 6.5 13 8 12.33 8 11.5zm7-5c0-.83-.67-1.5-1.5-1.5h-3C9.67 5 9 5.67 9 6.5S9.67 8 10.5 8h3c.83 0 1.5-.67 1.5-1.5zM8.5 15c-.83 0-1.5.67-1.5 1.5S7.67 18 8.5 18s1.5-.67 1.5-1.5S9.33 15 8.5 15zM12 1C5.93 1 1 5.93 1 12s4.93 11 11 11 11-4.93 11-11S18.07 1 12 1zm0 20c-4.96 0-9-4.04-9-9s4.04-9 9-9 9 4.04 9 9-4.04 9-9 9zm5.5-11c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm-2 5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"/>
</svg>
我不知道该怎么解释，但是它的作用与从html到画布的背景传播一样
问题示例
html {
width:50px;
height:50px;
background-color:red;
}
固定渐变
html {
width:50px;
height:50px;
background:linear-gradient(red,red) no-repeat;
}
由于存在传播，border-radius不会产生任何影响，因此可以使用radial-gradient：
html {
width:50px;
height:50px;
background:radial-gradient(farthest-side,red 97%,transparent 100%) no-repeat;
}
如果您想要任何一种border-radius，这是具有更多背景层的另一种想法：
html {
--r:25px; /* adjust this to control the Radius (Max value = width/2) */
--c:red;
width:100px;
height:100px;
background:
radial-gradient(farthest-side at bottom left,var(--c) 97%,transparent 100%) top right /var(--r) var(--r),radial-gradient(farthest-side at top right,transparent 100%) bottom left /var(--r) var(--r),radial-gradient(farthest-side at top left,transparent 100%) bottom right /var(--r) var(--r),radial-gradient(farthest-side at bottom right,transparent 100%) top left /var(--r) var(--r),linear-gradient(var(--c),var(--c)) center/calc(100% - 2*var(--r)) 100%,var(--c)) center/100% calc(100% - 2*var(--r)) ;
background-repeat:no-repeat;
}
对于非矩形图标：
html {
--rx:40px; /* adjust this to control the X Radius (Max value = width/2) */
--ry:75px; /* adjust this to control the Y Radius (Max value = height/2) */
--c:red;
width:100px;
height:150px;
background:
radial-gradient(farthest-side at bottom left,transparent 100%) top right /var(--rx) var(--ry),transparent 100%) bottom left /var(--rx) var(--ry),transparent 100%) bottom right /var(--rx) var(--ry),transparent 100%) top left /var(--rx) var(--ry),var(--c)) center/calc(100% - 2*var(--rx)) 100%,var(--c)) center/100% calc(100% - 2*var(--ry)) ;
background-repeat:no-repeat;
}
如果您还想模拟background-clip / background-origin
html {
--p:15px; /* offset from the edges*/
--rx:35px; /* Max value = width/2 - var(--p)*/
--ry:25px; /* Max value = height/2 - var(--p)*/
--c:red;
width:120px;
height:100px;
background:
radial-gradient(farthest-side at bottom left,transparent 100%) top var(--p) right var(--p)/var(--rx) var(--ry),transparent 100%) bottom var(--p) left var(--p)/var(--rx) var(--ry),transparent 100%) bottom var(--p) right var(--p)/var(--rx) var(--ry),transparent 100%) top var(--p) left var(--p) /var(--rx) var(--ry),var(--c)) center/calc(100% - 2*(var(--p) + var(--rx))) calc(100% - 2*var(--p)),var(--c)) center/calc(100% - 2*var(--p)) calc(100% - 2*(var(--p) + var(--ry))) ;
background-repeat:no-repeat;
}
,
我无法重现您遇到的问题。当我插入svg时，对我来说一切都很好。黄色背景只有圆圈一样大。如果您可以向CodePen或JSFiddle提供问题，那将很好。.
这是您可以做的。
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="rgb(255,50)" style="background-color: rgb(255,102); border-radius: 0%; width: auto; height: auto;">
<path d="M8 11.5c0-.83-.67-1.5-1.5-1.5S5 10.67 5 11.5 5.67 13 6.5 13 8 12.33 8 11.5zm7-5c0-.83-.67-1.5-1.5-1.5h-3C9.67 5 9 5.67 9 6.5S9.67 8 10.5 8h3c.83 0 1.5-.67 1.5-1.5zM8.5 15c-.83 0-1.5.67-1.5 1.5S7.67 18 8.5 18s1.5-.67 1.5-1.5S9.33 15 8.5 15zM12 1C5.93 1 1 5.93 1 12s4.93 11 11 11 11-4.93 11-11S18.07 1 12 1zm0 20c-4.96 0-9-4.04-9-9s4.04-9 9-9 9 4.04 9 9-4.04 9-9 9zm5.5-11c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm-2 5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"/>
</svg>
请注意，我
width: auto;
height: auto;
这将使背景和svg一样大。如果这不是您要查找的内容，请写评论，以便我们解决问题。
本文链接：https://www.f2er.com/3130879.html
