SVG和響應問題

我有這個主頁的問題 - >http://novustest.altervista.org/SVG和響應問題

在地圖上的大屏幕顯示正確，但我想讓它更加靈活，我想，地圖自動調整，如果我減少我的窗口瀏覽器。我怎樣才能做到這一點？

這是我的代碼，它非常簡單。我只有一個html頁面和2個js文件。

這是我的HTML頁面：

!DOCTYPE html> 
<style> 
.italy{ 
    width: 100%; 
    height: auto; 
    overflow: hidden; 
    display: inline-block; 
    position: relative; 
    vertical-align: middle; 
} 
</style> 

<html> 
    <head> 
     <meta charset="UTF-8"> 
    </head> 
    <body> 
     <div id="myMap" class="italy"> 

     </div> 
     <script src="raphael-min.js"></script> 
     <script src="map.js"></script> 
    </body> 
</html>

這是的jsfiddle鏈接，但它不工作...

它是

https://jsfiddle.net/ye0b2qvp/1/

來源

2015-04-23 Francesco

添加preserveAspectRatio屬性在SVG標籤，並與viewBox

查看這裏打球：

https://jsfiddle.net/fm024028/2/

<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 1500 600" ...

來源

2015-04-23 22:15:01 user2267379

謝謝...它的工作原理，但現在我有這個問題 - > HTTP： //novustest.altervista.org 該區域重疊...爲什麼？ – Francesco

如果有效，你可以檢查我的答案是否好？ – user2267379

你的SVG已經嵌入造型使真實它1920x1080。

請參閱this article瞭解有關此事的更多說明。

來源

2015-04-23 20:12:39 bmoneruxui

SVG和響應問題

回答

相關問題