为什么移动 Chrome 不渲染引用的 SVG？答案

【问题标题】：Why is Mobile Chrome not Rendering the Referenced SVG?为什么移动 Chrome 不渲染引用的 SVG？
【发布时间】：2019-04-12 12:59:42
【问题描述】：

我将以下 SVG 引用为背景图像，其宽度和高度在我的 CSS 文件中定义。

它在 Safari（桌面和移动）、Brave（桌面和移动）、Firefox（桌面和移动）和 Chrome 的桌面浏览器中完美显示。由于某种原因，Chrome 移动浏览器中根本不会显示该图像。

<?xml version="1.0" encoding="utf-8"?>

<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 1650 145" style="enable-background:new 0 0 1650 145;" xml:space="preserve">

<style type="text/css">
    .st0{fill:#F7F7F7;}
</style>

<path class="st0" d="M-5.2,0l0,2.9c0.5,0.7,0.8,1.6,0.8,2.8c0,0.3,0,0.6,0,1c0.1,0.4,0.1,0.8,0,1.3c0,0.1,0,0.2,0,0.3
c-0.1,3.4-0.2,6.8-0.5,10.1l2,122.9c0.1,0.8,0.2,1.5,0.3,2.3c0.6-1.8,2.1-3.2,4.5-3.2c3.9,0,5.4,3.6,4.6,6.5l836.1-2.6l4.4-33.5
L-5.2,0z"/>

<path class="st0" d="M1648.9,8.3c-0.3-1.2-0.5-2.4-0.8-3.5c-0.2-0.9-0.2-1.7,0-2.4c-0.2-1.6,0.3-2.9,1.1-3.9l-852,115l4.2,31.5
c0,0,0.1,0,0.1,0c1.8,0,3.1,0.8,3.9,1.9l843.2-2l2.2-97.4C1650.9,34.3,1650.6,21.2,1648.9,8.3z"/>

<path class="st0" d="M803.1,157.5C802,154,802,151,802,147C802,151,802,154,803.1,157.5"/>
</svg>

【问题讨论】：

可能是一个错误？尝试搜索/举报here

标签： svg mobile-chrome

【解决方案1】：

经过进一步的故障排除后，我发现我的 SVG 在 Chrome 的 iOS 移动浏览器上也能很好地显示，但在 Chrome 的 Android 移动浏览器上却不能。

事实证明，如果我将父元素高度设置为“vh”而不是“px”，Chrome 的 Android 移动浏览器将不会显示 SVG。

为了详细说明，我将父元素的高度设置为 40vh（子元素中引用的 SVG 作为背景图像），Android 版 Chrome 移动设备不会显示 SVG。一旦我将父元素的高度更改为 350 像素，Android 版 Chrome 移动浏览器就会显示子元素中引用的 SVG。

总而言之 - Chrome 的移动浏览器，特别是针对 Android 的浏览器不喜欢这样：

.parent {
    height: 40vh;
}
.child {
    background-image: url(images/example.svg);
}

但是，它确实是这样的：

.parent {
    height: 350px;
}
.child {
    background-image: url(images/example.svg);
}

【讨论】：