1,509 views
この記事は最終更新から 2330日 が経過しています。
1. やりたいこと
前回の投稿 (82) 【SVG画像】WEBブラウザ上でアニメーションさせる。(JavaScript編#1 Snap.svg) で使用した Snap.svg をもう少し使ってみる。
今回は…
Snap.svgの機能を使ってベクタ画像を作成し、これをアニメーションさせてみる。
2. やってみる
(1) SVGで円を描画する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00083 (1)</title>
</head>
<body>
<script src="./snap.svg-min.js"></script>
<svg id="svgdemo" width="100%" height="300"></svg>
<script>
svg = Snap('#svgdemo');
svg.circle(100, 100, 50); // cx, cy, r
</script>
</body>
</html>
(2) SVGで円を描画し、移動する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00083 (2)</title>
</head>
<body>
<script src="./snap.svg-min.js"></script>
<svg id="svgdemo" width="100%" height="300"></svg>
<script>
svg = Snap('#svgdemo'),
circle = svg.circle(0, 100, 50);
function anim(){
circle.attr({cx:0});
circle.animate({cx:1000}, 5000, function(){
anim();
});
};
anim();
</script>
</body>
</html>
(3) SVGで円を描画し、移動しながら拡大する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00083 (3)</title>
</head>
<body>
<script src="./snap.svg-min.js"></script>
<svg id="svgdemo" width="100%" height="300"></svg>
<script>
svg = Snap('#svgdemo'),
circle = svg.circle(0, 100, 50);
function anim(){
circle.attr({cx:0, r:50});
circle.animate({cx:1000, r:90}, 5000, function(){
anim();
});
};
anim();
</script>
</body>
</html>
(4) SVGで矩形を描画し、移動、変形、塗りつぶし色を変化させる。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00083 (4)</title>
</head>
<body>
<script src="./snap.svg-min.js"></script>
<svg id="svgdemo" width="100%" height="300"></svg>
<script>
svg = Snap('#svgdemo'),
rect = svg.rect(0, 0, 100, 100, 0, 0); // x, y, width, height, rx, ry
function anim(){
rect.attr( {x:0, width:100, height:100, rx:0, ry:0, fill:"#000"});
rect.animate({x:1000, width:300, height:30, rx:15, ry:15, fill:"#F00"}, 5000, function(){
anim();
});
};
anim();
</script>
</body>
</html>
(5) SVGで矩形を描画し、移動しながら透過度を変化させる。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00083 (5)</title>
</head>
<body>
<script src="./snap.svg-min.js"></script>
<svg id="svgdemo" width="100%" height="300"></svg>
<script>
svg = Snap('#svgdemo'),
rect = svg.rect(0, 0, 100, 100, 20, 20); // x, y, width, height, rx, ry
function anim(){
rect.attr( {x:0, opacity:0});
rect.animate({x:1000, opacity:1}, 5000, function(){
anim();
});
};
anim();
</script>
</body>
</html>
x. 謝辞
有用な情報をありがとうございます。
http://snapsvg.io/docs/
https://ferret-plus.com/7522
アクセス数（直近7日）: ※試験運用中、BOT除外簡易実装済2026-06-27: 0回 2026-06-26: 0回 2026-06-25: 0回 2026-06-24: 0回 2026-06-23: 2回 2026-06-22: 2回 2026-06-21: 3回