文書の過去の版を表示しています。
目次
elmでアナログ時計
svgについて
https://qiita.com/sasurai_usagi3/items/a8dd04f05b317be2a020
@sasurai_usagi3
2017年12月08日に更新
SVG入門
https://euske.github.io/euskecs/lec_svg/index.html
とほほ
SVG入門
→上記2つは、一番最初にお勧めです。
そのあと、以下の解説に取り組むのがよいかと思います。すごく丁寧です。
http://tutorial.jp/graph/
SVG実習マニュアル
https://triple-underscore.github.io/SVG11/coords.html
SVG1.1 第2版
7 座標系, 変換, 単位
上記の引用ここから
平行移動してから回転
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="400px" height="120px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <desc>Example RotateScale - 回転と拡縮変換</desc> <g fill="none" stroke="black" stroke-width="3" > <!-- 初期座標系の座標軸を描く --> <line x1="0" y1="1.5" x2="400" y2="1.5" /> <line x1="1.5" y1="0" x2="1.5" y2="120" /> </g> <!-- 原点を初期座標系の (50,30) にとり、 30 度 回転された新たな座標系を確立する。 --> <g transform="translate(50,30)"> <g transform="rotate(30)"> <g fill="none" stroke="red" stroke-width="3" > <line x1="0" y1="0" x2="50" y2="0" /> <line x1="0" y1="0" x2="0" y2="50" /> </g> <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" > ABC (rotate) </text> </g> </g> <!-- 原点を初期座標系の (200,40) にとり、 1.5 倍拡大された新たな座標系を確立する。 --> <g transform="translate(200,40)"> <g transform="scale(1.5)"> <g fill="none" stroke="red" stroke-width="3" > <line x1="0" y1="0" x2="50" y2="0" /> <line x1="0" y1="0" x2="0" y2="50" /> </g> <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" > ABC (scale) </text> </g> </g> </svg>
引用ここまで
Viewport描画範囲とViewBox表示範囲についてのリンク
個人的に、最初に
viewbox="0 0 200 200"
という表記を見たときにわかりにくいと思ったのが、4つの引数(そもそも関数でないかもしれませんが)の最初の2つと、後の2つが全く異質のものであるところでした。
viewbox="x y width height"
のように、最初の2つの引数で、
https://wemo.tech/1520
【#2】SVGを極めたい!~ ビューポートとは何か・svgタグの描画領域・width,height,viewBox属性の挙動について ~
2018/05/27
→こちらの図の、橙色の線で囲まれた部分が
ビューポートで、グレーで塗りつぶした部分がViewBoxのようです。
http://nekoneko-wanwan.github.io/demo/svg/viewbox/
SVG ViewBoxの動作確認
時計の文字盤の描画
例えば、時計の文字盤の2の場合、以下のように描画できるか?
(Inkscapeで描いてからsvgに変換した方が早そうですが、、、)
- svg width=“200px” height=“200px”
- viewbox=“0 0 200 200”
- 中心が(100, 100)、半径100の円
- g transform=“translate(100,100)”
- g transform=“rotate(30)”
- 円の中心から長さ80のところに『2』とかく
- 円の中心から長さ80のところを中心として、-30度回転
、、、最初から『2』を記載する座標を計算して、その位置に『2』を表示する方が早いですね、、、
長さr、x軸からの角度θのベクトルは、
(r cos θ, r sin θ)
となるので、
時計の中心を(100, 100)とし、中心からの距離80にある、文字盤『2』(30度)の座標は、
(100, 100) + (80 cos 30゚, 80 sin 30゚)
となります。今回はy軸が下向きだから、
-80 sin 30゚にしないといけません。絵を描かないと間違えやすいです。ややこしい、、、
viewboxを調整して、時計の中心を(0, 0)としてみる
いちいち(100, 100) に平行移動するのが面倒なので、時計の中心を(0, 0)としてみたいと思います。
- svg width=“200px” height=“200px”
- viewbox=“-100 -100 200 200”
svgでアナログ時計のリンク
https://qiita.com/Reyurnible/items/e0b715129ae0f18a94fb
@Reyurnible
2015年05月27日に更新
JavascriptとSVGを使用した簡単な時計とカレンダー
上記のコード
https://github.com/Reyurnible/svgclock/blob/master/clock.html
https://medium.com/the-andela-way/create-a-pure-css-clock-with-svg-f123bcc41e46
Create a pure CSS clock with SVG.
Go to the profile of John O. Paul
John O. Paul
Apr 27, 2018
https://simonrjones.net/code/svg-clock/
上記のデモサイトのコードは以下となります。
https://github.com/simonrjones/svg-clock
試してみる
リンク
目次:Elm