内联 SVG 未在 chrome 中显示答案

【问题标题】：Inline SVG not showing in chrome内联 SVG 未在 chrome 中显示
【发布时间】：2021-03-26 15:06:18
【问题描述】：

在使用 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>

【问题讨论】：

在 Chrome/Mac 中显示良好。请注意，如果您没有为 SVG 指定尺寸（例如 width="53px"），则它应该默认为嵌入和替换元素的默认尺寸 - 即 300px 宽。
SVG 在 Win10 上的 Chrome 中也能正常显示。我会更仔细地查看它周围的 HTML 的 CSS。如果您需要进一步的帮助，您可能需要使用minimal reproducible example 更新您的问题。

标签： vue.js google-chrome svg gridsome

【解决方案1】：

由于我遇到了类似的特定于 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>

【讨论】：