Question

我的主页上有两个svg图像，它们位于对象标记内。当浏览器在Chrome和Firefox中调整大小时，它们可以很好地扩展，但在Safari中，它们不会缩放，它们只是下载。我已经尝试调整svg图像本身的宽度和高度，但这只会导致svg在平板电脑尺寸屏幕上变得太大。我已经搜索并搜索了一个解决方案，但还没有找到解决方案。虽然我希望有一种方法可以定位Safari，因为它在Chrome和Firefox中运行良好，如果有人可以提供一些帮助，我会非常感激。

我的一个svg图片的html代码：

    <a href="about.html">
            <div class="svg-container">
                <object class="img-responsive" type="image/svg+xml" 
                data="images/portrait-md.svg" >
               <img src="images/portrait-md.png" />
                </object>
           </div>
        </a>

我用于div容器类的css：

    .svg-container {
        display: inline-block;
        overflow: hidden;
        position: relative;
        vertical-align: middle;
    }

    .svg-container object {
        pointer-events: none;
    }

    .img-responsive {
        display: block;
        height: auto;
        width: 100%;
        position: relative;
     }

我的网站：http://rachelhkay.com

Answer 1

您可以在css中将svg的宽度和高度设为100％。

svg {
height: 100%;
width: 100%;
}

了解更多信息。请访问以下链接，看看是否有帮助。

http://benfrain.com/attempting-to-fix-responsive-svgs-in-desktop-safari/

具有对象标记的SVG不在Safari中缩放

1 个答案: