SVGアニメーション – javascriptを使う(2) – fill要素の動的変化
SVG要素をjavascriptを使ってアニメーションする方法を試します。
前回の投稿で、アニメーションとして取り扱えるSVGのプロパティを列挙しましたが、
その中から fill を試してみます。
下記のサンプルを用意しました。
<!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"
>
<rect id="recttest" x="10" y="10" width="100" height="100" fill="#000000" />
</svg>
<script>
let color_value = 0;
let millisecond = 50;
let dom_rect = document.querySelector("#recttest");
setInterval(() => {
let r = Math.round(color_value);
let g = Math.round(color_value);
let b = Math.round(color_value);
if (r > 255) {
color_value = 0;
}
color_value += 5;
let fill_color = "rgb(" + r + "," + g + "," + b + ")";
dom_rect.setAttribute('fill', fill_color);
}, millisecond)
</script>
</body>
</html>
画面にアクセスすると開始座標(10,10)、終了座標(100,100)で、SVGのrect要素が出力されます。
また、javascriptによるfill要素の動的変更で、そのrectの色要素(RGBの全要素)が「0→255」までの値で動的に変化します。
millisecond は単純にミリ秒での変化なので、この場合は50ミリ秒でRGBの値を決定しているので、0.05秒の速さで「黒→白」まで変化することがわかります。