svg圖像不能在safari 5.1.7（windows）

svg圖像不能在safari 5.1.7（windows）下工作。但是當我在safari中打開svg圖像然後訪問該網站時，圖像顯示在那裏。svg圖像不能在safari 5.1.7（windows）

2016-09-20 Cspk Isb

請更清楚你的問題是什麼。「不工作」是什麼意思？你說「訪問該網站」 - 什麼網站？ –

我正在開發一個網站，其中我使用svg圖像，就像這個，現在，當我訪問該網站的鉻工作正常，但在Safari瀏覽器中訪問它時，svg圖像不顯示在那裏。但是，如果我在safari中打開svg圖像，那麼它將顯示在網站中。 –

你的意思是，如果你直接加載SVG（例如www.my.site/somefile.svg），那麼之前沒有顯示的圖像現在開始工作？ –

Windows上的Safari瀏覽器出現了計算響應式內聯SVG高度的已知問題。

您可能嘗試intrinsic ratio技術，由此你絕對位置的<object>標籤與底部填充等於viewBox的SVG的比率（或高度/寬度屬性）內的<svg>標籤。

.my-responsive-svg { 
 
    width: 100%; 
 
    display: block; 
 
    height: auto; 
 
    position: relative; 
 
    /* for an svg with a 16:9 aspect ratio */ 
 
    padding-top: 56.25%; 
 
} 
 

 
.my-responsive-svg svg { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
}

<object class="my-responsive-svg"> 
 
    <svg width="160" height="90" viewBox="0 0 160 90"> 
 
    <rect x="10" y="10" width="140" height="70" /> 
 
    </svg> 
 
</object>

來源：帽尖塞爾希奧·洛佩斯誰在this blog post評論。

來源

2017-06-09 13:02:48 JamesWilson

svg圖像不能在safari 5.1.7（windows）

回答

相關問題