お世話になります。 # 概要ただいまSVGで「秒針が進む度に、一番外側の枠が1目盛りづつ増えるアナログ時計」を作ろうとしています。使用しているのは[Snap.svg](http://snapsvg.io/)です。 # ソースコード現状のコードは以下となります。 ```html ``` ```javascript // analog_watch.js const WIDTH = 400; const HEIGHT = 400; const CX = WIDTH / 2; const CY = HEIGHT / 2; const R = WIDTH / 2 * 0.8; document.addEventListener("DOMContentLoaded",function () { Snap.plugin(function(Snap, Element, Paper, glob){ Snap.do = function(set){ set(); var anim = mina(0,1,0,1, function(){return 0.5;},set,mina.liner); return anim; } }); var paper = Snap("#container").attr({strokeLineCap:"round"}); var around_circle = paper.circle(CX, CY, R * 1.1).attr({ fill: "none", stroke:"#fa0", strokeWidth: R * 0.2, strokeDashOffset: 25 }); var circle = paper.circle(CX, CY, R).attr({fill: "#333", stroke: "#666", strokeWidth:4}) var r = R; r *= .75; var hour = paper.line(CX, CY, CX, r).attr({stroke: "#ffc", strokeWidth: 4}); r *= .75; var minute = paper.line(CX, CY, CX, r).attr({stroke: "#fff", strokeWidth: 2}); r *= .75; var second = paper.line(CX, CY, CX, r).attr({stroke: "#f66", strokeWidth: 1}); var anim = Snap.do(function () { var now = new Date(); var s = now.getSeconds(); var m = now.getMinutes() + s / 60; var h = now.getHours() + m / 60; var now_arc_end = 0; second.transform("r" + s * 6 + "," + CX + "," + CY); around_circle.animate({strokeDashArray: "30, 70"}) minute.transform("r" + m * 6 + "," + CX + "," + CY); hour.transform("r" + h * 30 + "," + CX + "," + CY); }) } , false); ``` ※申し訳ございません、実際の動作はソースコードをコピーして手もとのブラウザでご確認ください。 # 現状現状は以下の画像の通りです。 ![現状のアナログ時計](62bd3b18a1aab82cb00d568435aef257.png) # 実現したいこと上記の画像のオレンジ色の部分を、秒針の位置に合わせて扇形上に増えていくアニメーションを実装したいです。 # やってみたこと * Snap.svgのpathにはUコマンドがあるので、それをtransformで使えないかとやってみましたが、動きませんでした。 * pathをtransformメソッドを使い、三角関数で座標を指定して描画しようとしましたが、正直頭が追いつかず、コードも汚くなってしまったため、一度諦めてます。おそらくこの方法がベターだと思いますが。 * オレンジの枠をCircle属性にしてanimationさせようとしましたが、そもそも動かし方がよくわかっていません。 -------------------------- 拙い質問かと思いますが、ご回答いただければ幸いです。 # 参考資料 * [Snap.svgの使い方まとめ](http://defghi1977.html.xdomain.jp/tech/snapsvg/snapsvg.xhtml) * [SVGとJavaScriptで動くアナログ時計](http://ckazu.sakura.ne.jp/garage/clock.xhtml) * [SVGで円グラフを描くシンプルな方法 | KSK-soft.com](http://ksk-soft.com/2014/08/06/svg-pie-graph/)

	@@ -1 +1 @@
1	- SVGで装飾付きのアナログ時計を作りたい
1	+ SVGで装飾付きのアナログ時計を作りたい（Snap.svg）

質問編集履歴