内联SVG在chrome中不显示
在使用Gridsome创建一个新网站的过程中，我们遇到了一些使用SVG和chrome的错误，在Firefox上运行得很好。
基本上看起来<svg>的宽度和高度都是0px，0px；但是如果我加上100%的宽度，它就会在Chrome中显示出来
HTML：
<div class="hero__brands__grid__logos__logo automotive hero__brands__grid__logos__logo--six">
<div id="bmw" class="imgPuller">
<div class="img">
<svg></svg>
</div>
</div>
</div>SVG代码：
<svg id="BMW" data-name="BMW" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53 53">
<g id="BMW-logo-grey-fallback-53px">
<g id="BMW-logo">
<g id="BMW-logo-fallback">
<g id="BMW_Grey-Colour_RGB-2" data-name="BMW Grey-Colour RGB-2">
<g id="BMW_Grey-Colour_RGB" data-name="BMW Grey-Colour RGB">
<path id="Shape" d="M26.5,0A26.5,26.5,0,1,0,53,26.5,26.49,26.49,0,0,0,26.5,0ZM51.28,26.5A24.78,24.78,0,1,1,26.5,1.72,24.79,24.79,0,0,1,51.28,26.5Z" style="fill: rgb(111, 111, 111);"></path>
<path id="Shape-2" data-name="Shape" d="M26.5,10.8v.86h0A14.85,14.85,0,0,1,41.34,26.5h.86A15.7,15.7,0,0,0,26.5,10.8h0m0,30.54A14.85,14.85,0,0,1,11.66,26.5H10.8A15.7,15.7,0,0,0,26.5,42.2" style="fill: rgb(111, 111, 111);"></path>
<g id="Group">
<path id="W" d="M39.19,15.32c.36.38.88,1,1.17,1.37l5.36-3.37c-.27-.35-.7-.88-1-1.25l-3.4,2.23-.23.19.17-.25,1.5-3-1.06-1-3,1.49-.26.17.2-.23,2.25-3.37c-.39-.34-.77-.64-1.26-1l-3.4,5.32c.43.33,1,.81,1.36,1.14l3.2-1.65.21-.15-.15.2Z" style="fill: rgb(111, 111, 111);"></path>
<path id="M" d="M27,8.58l1.47-3.26L28.58,5l0,.3.16,4.35c.51.05,1,.12,1.57.21L30,3.44c-.73-.08-1.46-.14-2.19-.17L26.41,6.83l-.05.26-.06-.26L24.86,3.27c-.73,0-1.45.09-2.19.17l-.23,6.45c.52-.09,1-.16,1.56-.21l.16-4.35,0-.3.09.29,1.47,3.26Z" style="fill: rgb(111, 111, 111);"></path>
<path id="B_22d" d="M15.18,13.72c.84-.89,1.32-1.91.47-2.89a1.65,1.65,0,0,0-1.87-.39l-.06,0,0-.06A1.55,1.55,0,0,0,12,8.48c-.8.08-1.41.62-3.08,2.46-.5.56-1.23,1.43-1.67,2l4.58,4.31C13.36,15.59,14,15,15.18,13.72Zm-6-1.06a30,30,0,0,1,2.34-2.54,1.26,1.26,0,0,1,.48-.3.57.57,0,0,1,.68.44,1,1,0,0,1-.34.84c-.49.54-2.28,2.4-2.28,2.4ZM11,14.35s1.74-1.83,2.31-2.41a2.28,2.28,0,0,1,.52-.45.6.6,0,0,1,.62,0,.54.54,0,0,1,.23.57,1.69,1.69,0,0,1-.45.7l-2.3,2.45Z" style="fill: rgb(111, 111, 111);"></path>
</g>
<path id="Path" d="M26.5,10.8V26.5H10.8A15.69,15.69,0,0,1,26.5,10.8Z" style="fill: rgb(0, 102, 177);"></path>
<path id="Path-2" data-name="Path" d="M42.2,26.5A15.69,15.69,0,0,1,26.5,42.2V26.5Z" style="fill: rgb(0, 102, 177);"></path>
</g>
</g>
</g>
</g>
</g>
</svg>回答 1
Stack Overflow用户
发布于 2021-11-05 20:04:31
由于我遇到了类似的Chrome特定问题，并且在搜索结果中排名靠前，我想我应该发布我的发现。
当使用<img>标签时，它可以正确显示，但我想在不使用疯狂的滤镜技巧的情况下尝试调整颜色，所以我尝试以内联方式显示它，但没有显示。经过一番尝试之后，我尝试了一下Safari，它显示了预期的效果。
使用Chrome中的样式属性查看器，它似乎正在应用我们的CSS中存在的* { revert: all }规则，这导致<path>元素的d属性返回。
此测试用例的修复程序是:not(path) { revert: all }。我想其他的SVG标签可能也会受到影响，所以像:not(svg *) { revert: all }这样的标签可能更好(但我还没有对它进行彻底的测试)。
可以在Chrome、Firefox和Safari中加载以下HTML，以显示只有Chrome受影响：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>inline SVG test</title>
<style>
* {
all: revert
}
</style>
</head>
<body>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.9978 3.9978C18.7418 3.9978 18.4748 4.0838 18.2788 4.279L5.9978 16.5598V11.9978H3.9978V18.9978C3.9978 19.5498 4.4458 19.9978 4.9978 19.9978H11.9978V17.9978H7.43481L19.7168 5.71661C20.1068 5.32601 20.1068 4.6696 19.7168 4.279C19.5208 4.0838 19.2538 3.9978 18.9978 3.9978Z" fill="#091C42"/>
</svg>
</body>
</html>
https://stackoverflow.com/questions/65315053
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号