如何調整SVG動畫的大小？

我被困在調整svg動畫到頁面的不同百分比。如何調整SVG動畫的大小？

我已經創建了一個增加它的大小，然後回到正常，這樣的循環：

<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
<circle id="myCircle" cx="600" cy="250" r="70" fill="yellow" stroke="green" stroke-width="5"> 
<animate attributeName="r" values="70; 140; 210; 140; 70" dur="10s" repeatCount="indefinite"/> 
</circle> 
</svg>

然後，當我改變SVG的面積大小，圓不改變其大小也不是在這個區域內的位置。

我試圖用CSS捐贈尺寸動畫擴展到身體像素，然後一個區域分配給百分比SVG：

body{ 
width: 1440px; 
heigth: 990px 
} 

#mySVG{ 
width: 100%; 
}

而且，我試着用JavaScript來改變大小：

function resize(){ 
var svg = document.getElementById("mySVG"); 
     svg.style.width = window.innerWidht; 
svg.style.height = window.innerHeight; 
}

沒有人工作......想知道什麼是縮放SVG動畫的最佳方法，不僅是用這個圓圈而且用SVG動畫。

感謝高級。

來源

2015-02-05 user2095819

您必須使用視圖來定義座標空間。例如。

<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1" 
viewbox="0 0 1200 1200">

viewBox屬性允許指定一組給定的圖形的拉伸以適合特定容器元素。

viewBox屬性的值是四個數字分鐘-X，分鐘-Y，寬度和高度的列表，由空格和/或逗號分隔，其指定在用戶空間中的矩形，其應該被映射到由給定元素建立的視口的邊界，考慮到屬性preserveAspectRatio。

<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1200 1200"> 
 
    <circle id="myCircle" cx="600" cy="250" r="70" fill="yellow" stroke="green" stroke-width="5"> 
 
     <animate attributeName="r" values="70; 140; 210; 140; 70" dur="10s" repeatCount="indefinite" /> 
 
    </circle> 
 
</svg>

有用SVG Resource Article @ CSS-Tricks.com

MDN Link

來源

2015-02-05 14:45:19

如何調整SVG動畫的大小？

回答

相關問題