Chrome 不渲染 svg 图像答案

【问题标题】：Chrome does not rendering svg imageChrome 不渲染 svg 图像
【发布时间】：2020-03-03 22:37:05
【问题描述】：

我在渲染 svg 图像时遇到问题，但仅限于 Chrome（FF、IE、Edge 都可以）。我只能看到图像中的文本，但图像等没有任何背景颜色。我需要全屏显示图像，这是我的代码。有人可以帮助我，chrome的问题在哪里以及如何解决？

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
}

.bg {
  /* The image used */
  background-image: url("bg.svg");

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
</head>
<body>
<div class ="bg"> </div>



</body>
</html>

【问题讨论】：

你的 svg 的内容是什么？您向我们提供代码的方式应该可以在 chrome 中运行，因此我们无法处理这些有限的信息。
这是简单的图像。背景是绿色的，还有一句话。也许，将其转换为其他格式会更好吗？我想让它响应。
如果您有一个简单的 svg，您的解决方案应该可以工作。尝试修复所有 HTML 语法错误（class 和 = 之间有一个空格，也许删除它可以解决您的问题。
没有解决问题:(

标签： google-chrome svg fullscreen

【解决方案1】：

如果没有更多信息，我们只能说your code works

我所做的只是将 url 从您的 svg 文件更改为公共占位符 svg 图像。如您所见，显示此文件的问题为零。

body, html {
  height: 100%;
  margin: 0;
}

.bg {
  /* The image used */
  background-image: url("https://placeholder.pics/svg/300");

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

&lt;div class="bg"&gt; &lt;/div&gt;

【讨论】：