gpt4 book ai didi

css - SVG 背景图像未在 Safari/Safari Mobile 中正常显示

转载 作者:太空宇宙 更新时间:2023-11-04 12:40:59 25 4
gpt4 key购买 nike

我正在更新一个图书出版商的网页,该出版商的图书已在线发布。他们以 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com