More than 5 years have passed since last update.

SVG 簡単なanimate

Posted at 2016-06-03

circleタグのr(半径)を20から80に2秒かけてアニメーション。
animateタグ内に記述。
おまけでjsでアクセスもしてみる

hoge.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>polylineとpolygon</title>
</head>
<body>
	<svg width="500" height="500" onload="
		var c = document.getElementById('circle');

		// 0.5秒間隔で色変更
		setInterval(setRandColor, 500);
		
		// ランダムな色設定
		function setRandColor(){
		    var randColorArr = ['orange', 'blue', 'pink', 'red', 'aqua'];
			var random = randColorArr[Math.floor(Math.random() * randColorArr.length)];
			c.setAttribute('fill',random);
		}

	">

	  <!-- r半径を20から80に2秒かけてアニメーション -->
	  <circle id="circle" cx="100" cy="100" r="20" fill="pink">
	  	<animate attributeName="r" from="20" to="80" dur="2s" repeatCount="indefinite"/>
	  </circle>


 	</svg>
</body>
</html>

svgタグのonload属性にJsをかけるらしい。
それでプロパティにアクセスしていじるの可能。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up