SVGアニメーション – javascriptを使う
SVG要素をjavascriptを使ってアニメーションする方法を試します。
シンプルな line要素 を javascript制御で rotate属性を変化させて回転する例です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
<style>
.line {
stroke-width: 5;
stroke: #DEDEDE;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
width = "500"
height = "250"
viewBox = "0 0 500 250"
style = "background-color:#fff"
>
<line
x1 = "0"
y1 = "0"
x2 = "80"
y2 = "80"
class = "line"
id = "linetest"
/>
</svg>
<script>
let rotate_value = 0;
let millisecond = 50;
let dom_line = document.querySelector("#linetest");
setInterval(() => {
rotate_value += 3;
dom_line.setAttribute('transform', 'translate(250, 125) rotate(' + rotate_value + ')');
}, millisecond)
</script>
</body>
</html>
画面にアクセスすると長さが80ピクセルのline(直線)を、javascript の setIntervalメソッド を使い、
50ミリ秒間隔で、動的に rotate(回転) しています。
また、アニメーションとして取り扱えるSVGのプロパティは、次のようなものがあります。
fill : 要素の塗りつぶし色を指定 stroke : 要素の境界線の色を指定 stroke-width : 境界線の太さを指定 stroke-dasharray : 境界線の破線パターンを指定 fill-opacity : 要素の透明度を指定 transform : 要素の位置、回転、スケールなどの変換を指定 clip-path : 要素の表示範囲をクリップするためのパスを指定 filter : 要素に対して画像処理のフィルターを適用 text-anchor : テキスト要素の配置基準点を指定 font-family : テキストのフォントファミリーを指定 font-size : テキストのフォントサイズを指定 text-decoration : テキストの装飾（下線、取り消し線など）を指定 text-align : テキストの水平方向の配置を指定します
プロパティごとのアニメーションの仕方はjavascriptの書き方が変わるので、
今後、別な投稿で触れる機会があるかと思います。