SVG 簡単なanimate #SVG

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をかけるらしい。
それでプロパティにアクセスしていじるの可能。