我正在更新一个图书出版商的网页，该出版商的图书已在线发布。他们以 jpg 格式提供，但我正在将其迁移到 SVG。我正在对图书查看器进行测试，我发现将 SVG 图像包含到容器大小的唯一方法是将其设为背景图像。它在 Chrome 中完美运行，但我在桌面和移动版 Safari 中也遇到了问题。他们都显示了 SVG 图像，但他们错过了它的重要部分。
我上传它是为了让你看看我在说什么: http://www.edicionesbabilonia.com/svg.html
附上我一直在使用的代码:
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<html>
<head>
<style type="text/css">
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.divsvg {
border: 1px solid #999;
height: 100%; /* collapse the container's height */
width: 50%; /* specify any width you want (a percentage value, basically) */
/* apply a padding using the following formula */
/* this formula makes sure the aspect ratio of the container equals that of the svg graphic */ /* create positioning context for svg */
background-image: url(pv-58.svg);
background-size: contain;
background-repeat: no-repeat;
}
#left {
float: left;
background-position: right center;
}
#right {
margin-left: 50%;
background-position: left center;
}
</style>
</head>
<body>
<div class="divsvg" id="left">
</div>
<div class="divsvg" id="right">
</div>
</body>
</html>
最佳答案
显然 Webkit 上有一个错误需要将其作为对象加载。可以将它作为对象加载并隐藏它...
我的答案来自:SVG with embedded bitmap not showing bitmap when using <img> tag in webkit browser
关于css - SVG 背景图像未在 Safari/Safari Mobile 中正常显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26875696/