帶有對象標簽的SVG在Safari中無法縮放

Question

我的主頁上有兩個svg圖像，它們位於對象標記內。 在Chrome和Firefox中調整瀏覽器的大小時，它們的縮放比例很好，但是在Safari中，它們不會縮放，只能下車。 我嘗試過調整sv​​g圖像本身的寬度和高度，但這只會導致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-sensitive-svgs-in-desktop-safari/