<svg>更改大小時縮放路徑和形狀

我正在使用Raphael在頁面上繪製一些圖形。 <svg>已被設置爲{ width:100%; height:600px }，這是正常工作。當我調整瀏覽器寬度時，我想調整<svg>中的形狀以適應新的寬度。理想情況下，這應該自動發生;只是在window.resize上手動縮放每個形狀和路徑似乎是錯誤的。<svg>更改大小時縮放路徑和形狀

我知道，百分比是非法的路徑字符串，但實際上，這就是我期待的事情：

var r = Raphael('container', '100%', 600); 
r.path("M0,0 L0,0 55%,0 100%,61z")

來源

2012-06-21 Jeff

呼叫梅德Baranovskiy？ –

@AshwinGanesh爲什麼我沒有想到這個？！你有他的電話號碼嗎？ :) – Jeff

也許[這個主題]（http://stackoverflow.com/questions/4322660/scaling-svg-raphael-js-like-an-swf）將與您的問題有關？ – raina77ow

你應該先用一個絕對的高度和寬度的紙張和路徑兩者。您還需要使用setViewBox()在紙上設置viewBox。

從那裏，你使用CSS設置的div#container到100％的寬度。您可能還需要設置body和html這樣：

body, 
html { 
margin: 0; 
width: 100%; 
}

來源

2013-02-14 22:49:45 tnsingle

<svg>更改大小時縮放路徑和形狀

回答

相關問題