Question

我正在更新图书出版商的网页，该网页上有自己的图书。他们在jpg中有它，但我正在将它迁移到SVG。我正在对书籍阅读器进行测试，我发现将SVG图像包含到容器大小的唯一方法是使其成为背景图像。它在Chrome中完美运行，但我也遇到了Safari for Desktop和Mobile的问题。它们都显示了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>

Answer 1

显然Webkit上存在一个需要将其作为对象加载的错误。可以将其作为对象加载并隐藏它......

我得到了答案：SVG with embedded bitmap not showing bitmap when using <img> tag in webkit browser

SVG背景图像未在Safari / Safari Mobile中显示

1 个答案: