时间戳

首页 > 解决方案 > Chrome 不渲染 svg 图像

google-chrome - Chrome 不渲染 svg 图像

问题描述

我在渲染 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>

标签： google-chromesvgfullscreen

解决方案

没有更多信息，我们只能说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;
}
<div class="bg"> </div>

推荐阅读