根據頁面加載時的div大小縮放硬編碼的SVG圖像

我有一個div元素，其中包含svg圖形（一串圓和邊），並且我還在svg元素上設置了viewBox屬性。在px中，圖表中節點和邊的座標對指定的屏幕尺寸（因此也適用於指定的div尺寸）進行硬編碼。使用期望的div大小時，圖形加載得很好，並且在瀏覽器窗口大小調整時也可以向上和向下縮放。根據頁面加載時的div大小縮放硬編碼的SVG圖像

但是，每當頁面在不同的屏幕/ div大小下加載時，我的問題就會出現，因爲svg圖像在指定的div大小之前保持不變。這會創建一個對於較小的瀏覽器/屏幕尺寸來說太大的圖像。

我設置了svg元以下：

<svg id="mygraph" preserveAspectRatio="xMidYMid meet">

和使用Javascript設置其屬性viewBox的div元素後：

<script type="text/javascript"> 
    document.getElementById("mygraph").setAttribute("viewBox", "0 0 " + $("#graphdiv").width() + " " + $("#graphdiv").height()); 
</script>

這並不解決問題。那麼我還有什麼可以嘗試的？

來源

2012-09-03 skyork

viewBox定義了svg中使用的座標系，它不會改變svg的大小。如果你有一個viewBox，你只需要設置svg的寬度和高度（例如使用CSS），它將渲染到這個尺寸。

來源

2012-09-04 09:25:04

確實，我可以通過Javascript更改'svg'的寬度和高度。或者，我可以將viewBox屬性固定爲所需的大小，並且應該照顧不同的屏幕/窗口大小，正如我意識到的那樣。謝謝！ – skyork

根據頁面加載時的div大小縮放硬編碼的SVG圖像

回答

相關問題