跨瀏覽器的方式來強制SVG適合裏面div

我試圖讓我的SVG圖像適合父容器。不過，我可能誤解了一些東西，因爲沒有任何東西適合我。跨瀏覽器的方式來強制SVG適合裏面div

我試過使用vievBox和preserveAspectRatio但它沒有任何效果。 JS FIDDLE

然後我試着寫一個腳本來轉換SVG但仍然是不匹配的視框中完美JS FIDDLE 2

不知怎的，在Firefox和Chrome這兩個例子在Internet Explorer 11的工作，但沒有。

HTML

<div class="svg_box"> 
    <svg id="svg_map" viewBox="0 0 800 400" preserveAspectRatio="xMidYMid meet"> 
    <g id="viewport"> 
     <g id="County_fills"> 
     <g id="wicklow"> 
      <path d="m 660.19812,671.17693 c 4.3002,-24.4434 25.98479,-42.3466 13.668,-66.4151 3.521,-20.6076 -8.00616,-48.1039 -28.42028,-38.027 -11.84916,-7.4307 -15.52234,9.0615 -25.5361,-10.1857 -13.21206,-5.8314 -15.00724,18.141 -19.90659,23.682 -3.4252,15.0746 -22.32726,16.7667 -25.17803,34.5218 -0.30454,15.0967 8.81716,24.9106 24.882,22.849 7.57843,8.1943 17.12841,-1.2087 9.03025,18.9026 -10.09526,5.7923 -29.7139,-17.2323 -30.74574,1.6656 7.44289,0.675 23.28352,39.2398 37.71449,22.0728 5.70401,-21.6558 29.89655,-24.6066 41.068,-9.182 -0.82169,2.7052 6.39378,3.4876 3.424,0.116 z" id="path3626" /> 
     </g> 
     <!-- ... other counties ... ---> 
     </g> 
    </g> 
</svg>

$('#viewport').each(function() { 
     var objThs = $(this); 

     scaleH = $('#svg_map').innerHeight()/objThs[0].getBoundingClientRect().height; 
     scaleW = $('#svg_map').innerWidth()/objThs[0].getBoundingClientRect().width; 

     if (scaleH < scaleW) { 
      scale = scaleH; 
     } 
     else { 
      scale = scaleW; 
     } 
    centerX = parseInt($('#svg_map').innerWidth() - objThs[0].getBoundingClientRect().width * scale)/2; 
    centerY = parseInt($('#svg_map').innerHeight() - objThs[0].getBoundingClientRect().height * scale)/2; 
     objThs.attr('transform', "matrix(" + scale + ",0,0," + scale + "," + centerX + ","+centerY+")"); 
    });

我會，如果有可能，並且不用JS，但JS是聊勝於無;-)真的快樂

任何幫助將不勝感激。

來源

2014-11-21 LJ Wadowski

你檢查是否innerWidth（）和innerHeight（）在所有瀏覽器中的SVG元素的工作。我懷疑它沒有。如果正確設置viewBox，則不需要使用JS。你是如何選擇你的viewBox值的？ – 2014-11-21 12:37:43

我沒有使用innerWidth和innerHeight來獲得svg尺寸，但父div的大小，以獲得svg大小我使用.getBoundingClientRect（）。我確定我設置了vieBox錯誤，但我不明白如何正確設置在這裏，你可以看到我的嘗試：http://jsfiddle.net/2xw7vu0c/2/ – 2014-11-21 12:42:33

它看起來像我你喜歡你打電話給innerWidth＃ svg_map，這是svg，而不是div。 – 2014-11-21 22:17:54

viewBox屬性描述了SVG內容的邊界框。瀏覽器使用它來計算SVG內容的縮放比例，以填充SVG的寬度和高度而不會溢出（取決於您的preserveAspectRatio當然設置）。

在你的情況「0 0 800 400」是錯誤的。它只覆蓋該島的一部分。更準確的值是「74 58 617 902」。我通過在「視口」元素上調用getBBox()來實現。

見http://jsfiddle.net/2xw7vu0c/6/

來源

2014-11-21 22:23:28

跨瀏覽器的方式來強制SVG適合裏面div

回答

相關問題