751 views
この記事は最終更新から 1598日 が経過しています。
1. やりたいこと
Snap.svgを使って、矩形のベクタ画像の位置とサイズを変化させてみたい。
2. やってみる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00087 demo1</title>
</head>
<body>
<svg id="svg_rect" class="svg_rect_class" viewBox="0 0 290 150">
<defs>
<style>
.svg_rect_class{
fill: none;
stroke: #f00;
stroke-miterlimit: 10;
stroke-width: 2px;
}
</style>
</defs>
<rect id="rect1" x="37.5" y="20" width="180" height="90"/>
</svg>
<script src="./snap.svg-min.js"></script>
<script>
obj_svg = Snap('#svg_rect');
obj_rect = obj_svg.select('#rect1');
function anim_svg(){
obj_rect.animate({'x':27.3, 'y':5, 'width': 245, 'height': 120}, 1000, function(){
this.animate({ 'x': 6.5, 'y':12, 'width': 120, 'height': 40}, 1000, function(){
this.animate({'x':37.5, 'y':20, 'width': 180, 'height': 90}, 1000, function(){
anim_svg();
});
});
});
};
anim_svg();
</script>
</body>
</html>
解説
・25行目 : 制御対象の SVG画像を取得する。
・26行目 : 変化させたい対象の要素を取得する。今回の場合は rectタグを対象とする。
・28行目～30行目の animation関数でアニメーションさせている。
・JSON形式で矩形の属性を指定している。
→ ここでは x, y, width, heightの 4種類の属性を指定しているが、変化させたい属性だけを指定すればよい。
・アニメーション実行時間は、三つとも 1,000[ms]と指定している。
3. 所感
・Snap.svgは便利だなぁ