html - 带有对象标签的 SVG 在 Safari 中不缩放

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

You can make the width and height of the svg 100% in css.

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

For more information. Visit this link below, and see if that helps.

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