是否防止图标的SVG背景出血？
是否防止图标的SVG背景出血？
提问于 2019-11-10 07:48:34
这样做的目的是防止SVG图标的背景溢出，以便它们可以显示为独立的文件。许多类似问题的答案建议在SVG元素周围放置DIV或其他容器以防止出血，但其目标是使SVG图标独立，而不依赖于容器。
将rect元素作为背景元素的前缀不能可靠地工作，因为此方法会中断某些视口纵横比。
这个是可能的吗？
注意:要查看该缺陷，必须下载并在浏览器中打开SVG文件。使用JSFiddle/CodePen隐藏了这个问题，因为这些站点将SVG封装在一个容器中(它修复了出血问题)。
在此处下载SVG：https://gofile.io/?c=eKzjk7
示例SVG：
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="rgb(255, 120, 50)" style="background-color: rgb(255, 255, 102); 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>
理想输出：
实际输出：
回答 2
Stack Overflow用户
发布于 2019-11-10 08:29:56
使用渐变并禁用重复以避免这种情况：
<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, 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到canvas的背景传播相同
问题示例
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,var(--c) 97%,transparent 100%) bottom left /var(--r) var(--r),
radial-gradient(farthest-side at top left ,var(--c) 97%,transparent 100%) bottom right /var(--r) var(--r),
radial-gradient(farthest-side at bottom right,var(--c) 97%,transparent 100%) top left /var(--r) var(--r),
linear-gradient(var(--c),var(--c)) center/calc(100% - 2*var(--r)) 100%,
linear-gradient(var(--c),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 ,var(--c) 97%,transparent 100%) top right /var(--rx) var(--ry),
radial-gradient(farthest-side at top right,var(--c) 97%,transparent 100%) bottom left /var(--rx) var(--ry),
radial-gradient(farthest-side at top left ,var(--c) 97%,transparent 100%) bottom right /var(--rx) var(--ry),
radial-gradient(farthest-side at bottom right,var(--c) 97%,transparent 100%) top left /var(--rx) var(--ry),
linear-gradient(var(--c),var(--c)) center/calc(100% - 2*var(--rx)) 100%,
linear-gradient(var(--c),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 ,var(--c) 97%,transparent 100%) top var(--p) right var(--p)/var(--rx) var(--ry),
radial-gradient(farthest-side at top right,var(--c) 97%,transparent 100%) bottom var(--p) left var(--p)/var(--rx) var(--ry),
radial-gradient(farthest-side at top left ,var(--c) 97%,transparent 100%) bottom var(--p) right var(--p)/var(--rx) var(--ry),
radial-gradient(farthest-side at bottom right,var(--c) 97%,transparent 100%) top var(--p) left var(--p) /var(--rx) var(--ry),
linear-gradient(var(--c),var(--c)) center/calc(100% - 2*(var(--p) + var(--rx))) calc(100% - 2*var(--p)),
linear-gradient(var(--c),var(--c)) center/calc(100% - 2*var(--p)) calc(100% - 2*(var(--p) + var(--ry))) ;
background-repeat:no-repeat;
}
Stack Overflow用户
发布于 2019-11-10 08:00:36
我不能重现你的问题。当我插入svg时，对我来说一切都很好。黄色背景只有圆圈大小。如果您可以提供CodePen或JSFiddle来解决您的问题，那就更好了。
以下是您可以做的事情。
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="rgb(255, 120, 50)" style="background-color: rgb(255, 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一样大。如果这不是你想要的，写一个评论，这样我们就可以解决问题了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58784579
复制相关文章
相似问题
腾讯云开发者
