SVGアニメーション – javascriptを使う(3) – stroke要素の動的変化
アニメーションとして取り扱えるSVGのプロパティの stroke を試してみます。
下記のサンプルを用意しました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
<style>
#recttest {
stroke-width: 10;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
width = "500"
height = "250"
viewBox = "0 0 500 250"
>
<rect
id ="recttest"
x ="10"
y ="10"
width ="100"
height ="100"
fill ="#ffffff"
/>
</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 > 256) {
color_value = 0;
}
color_value += 5;
dom_rect.setAttribute('stroke', "rgb(" + r + "," + g + "," + b + ")");
}, millisecond)
</script>
</body>
</html>
画面にアクセスすると、SVGのrect要素が出力されます。
javascriptによるstroke要素の動的変更で、rectの枠線の色要素(RGBの全要素)が「0→255」までの値で動的に変化します。