elm:elm-clock
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン最新のリビジョン両方とも次のリビジョン | ||
elm:elm-clock [2019/06/25] – [ViewportとViewBoxについてのリンク] adash333 | elm:elm-clock [2019/06/28] – [viewboxを調整して、時計の中心を(0, 0)としてみる] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
====== elmでアナログ時計 ====== | ====== elmでアナログ時計 ====== | ||
+ | 以下に記載させていただきました。 | ||
+ | http:// | ||
+ | Elm0.19でアナログ時計 | ||
+ | 2019年6月21日 2019年6月28日 | ||
+ | {{: | ||
===== svgについて ===== | ===== svgについて ===== | ||
行 25: | 行 30: | ||
- | 上記の引用ここから | ||
- | 平行移動してから回転 | + | ===== ViewportとViewBoxについてのリンク ===== |
- | < | + | |
- | <?xml version=" | + | |
- | < | + | Viewportは描画範囲、ViewBoxは表示範囲といったイメージでしょうか?(viewboxの原点に負の値を指定しても、図形などは表示されるようですが) |
- | " | + | |
- | <svg width=" | + | |
- | | + | |
- | < | + | |
- | <g fill=" | + | |
- | <!-- 初期座標系の座標軸を描く --> | + | |
- | <line x1=" | + | |
- | <line x1=" | + | |
- | </ | + | |
- | < | + | |
- | 30 度 回転された新たな座標系を確立する。 --> | + | |
- | <g transform=" | + | |
- | <g transform=" | + | |
- | <g fill=" | + | |
- | <line x1=" | + | |
- | <line x1=" | + | |
- | </ | + | |
- | <text x=" | + | |
- | ABC (rotate) | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
- | <!-- 原点を初期座標系の (200,40) にとり、 | + | |
- | 1.5 倍拡大された新たな座標系を確立する。 --> | + | |
- | <g transform=" | + | |
- | <g transform=" | + | |
- | <g fill=" | + | |
- | <line x1=" | + | |
- | <line x1=" | + | |
- | </ | + | |
- | <text x=" | + | |
- | ABC (scale) | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
- | 引用ここまで | ||
- | ===== Viewport描画範囲とViewBox表示範囲についてのリンク ===== | ||
個人的に、最初に | 個人的に、最初に | ||
+ | |||
< | < | ||
viewbox=" | viewbox=" | ||
行 81: | 行 45: | ||
< | < | ||
- | viewbox=" | + | svg width=" |
</ | </ | ||
- | のように、最初の2つの引数で、 | + | のようにかくと、viewboxの最初の2つの引数x, yで、 |
+ | |||
+ | < | ||
+ | 表示範囲の左上の座標を(x, | ||
+ | </ | ||
+ | |||
+ | と指定し、後半の2つの引数vb-width vb-heightで、 | ||
+ | |||
+ | < | ||
+ | vp-widthをvb-widthで割った値をx軸方向の単位長さとする | ||
+ | |||
+ | vp-heightをvb-heightで割った値をy軸方向の単位長さとする | ||
+ | </ | ||
+ | |||
+ | ということを表すようです。(間違っていたらごめんなさい!) | ||
+ | |||
https:// | https:// | ||
行 131: | 行 111: | ||
==== viewboxを調整して、時計の中心を(0, | ==== viewboxを調整して、時計の中心を(0, | ||
+ | |||
+ | ソースコード | ||
+ | < | ||
+ | <script src=" | ||
+ | </ | ||
いちいち(100, | いちいち(100, | ||
+ | (20190629追記→'''< | ||
-svg width=“200px” height=“200px” | -svg width=“200px” height=“200px” | ||
-viewbox=“-100 -100 200 200” | -viewbox=“-100 -100 200 200” | ||
- | - | + | -中心が(100, |
+ | -座標(80cos30゚, | ||
+ | -文字を描くとき、座標の真ん中に、文字の真ん中がくるようにする | ||
+ | |||
+ | といった感じでいけるのでは? | ||
+ | |||
+ | https:// | ||
+ | |||
+ | 参考:http:// | ||
+ | svg要素の基本的な使い方まとめ | ||
+ | 8.文字列の挿入 | ||
+ | |||
+ | text-anchor=" | ||
+ | と、 | ||
+ | dominant-baseline=" | ||
+ | を使う? | ||
+ | |||
+ | < | ||
+ | |||
+ | <text x=" | ||
+ | 本日は晴天なり | ||
+ | </ | ||
+ | |||
+ | <text x=" | ||
+ | あ: | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | 参考:[[https:// | ||
+ | |||
+ | https:// | ||
+ | {{: | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
行 179: | 行 207: | ||
https:// | https:// | ||
+ | {{: | ||
elm/elm-clock.txt · 最終更新: 2019/06/28 by adash333