瀏覽器之間的HTML中的SVG縮放不一致

我正在嘗試在HTML中使用SVG，這一點我不太熟悉。它作爲一個對象嵌入在html中。瀏覽器之間的HTML中的SVG縮放不一致

SVG可通過CSS進行擴展。當窗口處於全尺寸狀態（即足夠大以至於SVG達到CSS的最大允許寬度時），在Firefox，Chrome和Safari中看起來很正常。當瀏覽器窗口很小時，實際的SVG圖像以及我認爲它的容器在Firefox和Chrome中適當縮小。但是，在Safari（桌面和iOS）中，SVG圖像本身會縮小，但其「容器」保持原來的最大高度。換句話說，Safari中實際圖像的頂部和底部的寬度太窄，而且寬度太窄。

我目前有通過CSS分配的寬度，最大寬度和最大高度值。應用「自動」以外的高度值會給所有瀏覽器帶來問題。我已經從SVG中移除了寬度和高度值，使其適應瀏覽器大小。

我想知道如何讓Safari以與Firefox和Chrome相同的方式縮放SVG圖像。感謝您提供任何輸入！

請看看這個例子：http://jay-bee-why.com/demos/svg-scaling.html

而且看到實際的網站：http://twowordsfor.com（編輯：現在已經過時）

這裏是我是如何嵌入在HTML中的SVG：

<div class="container"> 
     <object data="image.svg" type="image/svg+xml" id="logo"> 
      <img src="image.png"> 
     </object> 
</div>

這是CSS：

.container {width:99.8%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:30px;} 

#logo {width:100%; max-width:974px; max-height:300px; display:block; margin:0px auto 0px auto;}

這是SVG文件的頂部：

<?xml version="1.0" encoding="utf-8"?> 

<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
viewBox="0 0 967 135" enable-background="new 0 0 967 135" xml:space="preserve">

來源

2012-08-07 Jay Bee Why

http://stackoverflow.com/questions/16578484 /如何-可以-I-顯示-AN-SVG-圖像中之一個對象標籤的在-A-不同尺度 – Cedric 2014-06-20 11:12:41

下面是如何現在看起來：

.container {width:99.8%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:30px;} 
 

 
#logo {width:100%; max-width:974px; max-height:300px; display:block; margin:0px auto 0px auto;}

<div class="container"> 
 
     <object data="https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg" type="image/svg+xml" id="logo"> 
 
     </object> 
 
</div>

來源

2017-09-28 07:16:55

瀏覽器之間的HTML中的SVG縮放不一致

回答

相關問題