elm:elm-clock
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
elm:elm-clock [2019/06/25] – [viewboxを調整して、時計の中心を(0, 0)としてみる] 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: | ||
- | 上記の引用ここから | ||
- | |||
- | 平行移動してから回転 | ||
- | < | ||
- | <?xml version=" | ||
- | |||
- | < | ||
- | " | ||
- | <svg width=" | ||
- | | ||
- | < | ||
- | <g fill=" | ||
- | <!-- 初期座標系の座標軸を描く --> | ||
- | <line x1=" | ||
- | <line x1=" | ||
- | </g> | ||
- | <!-- 原点を初期座標系の (50,30) にとり、 | ||
- | 30 度 回転された新たな座標系を確立する。 --> | ||
- | <g transform=" | ||
- | <g transform=" | ||
- | <g fill=" | ||
- | <line x1=" | ||
- | <line x1=" | ||
- | </g> | ||
- | <text x=" | ||
- | ABC (rotate) | ||
- | </ | ||
- | </g> | ||
- | </g> | ||
- | <!-- 原点を初期座標系の (200,40) にとり、 | ||
- | 1.5 倍拡大された新たな座標系を確立する。 --> | ||
- | <g transform=" | ||
- | <g transform=" | ||
- | <g fill=" | ||
- | <line x1=" | ||
- | <line x1=" | ||
- | </g> | ||
- | <text x=" | ||
- | ABC (scale) | ||
- | </ | ||
- | </g> | ||
- | </g> | ||
- | </ | ||
- | </ | ||
- | |||
- | 引用ここまで | ||
===== ViewportとViewBoxについてのリンク ===== | ===== ViewportとViewBoxについてのリンク ===== | ||
行 152: | 行 111: | ||
==== viewboxを調整して、時計の中心を(0, | ==== viewboxを調整して、時計の中心を(0, | ||
+ | |||
+ | ソースコード | ||
+ | < | ||
+ | <script src=" | ||
+ | </ | ||
いちいち(100, | いちいち(100, | ||
+ | (20190629追記→'' | ||
-svg width=“200px” height=“200px” | -svg width=“200px” height=“200px” | ||
行 161: | 行 126: | ||
-文字を描くとき、座標の真ん中に、文字の真ん中がくるようにする | -文字を描くとき、座標の真ん中に、文字の真ん中がくるようにする | ||
- | といった感じでいけるのでは?あとで実際にやってみたいと思います。 | + | といった感じでいけるのでは? |
+ | |||
+ | https:// | ||
参考:http:// | 参考:http:// | ||
行 167: | 行 134: | ||
8.文字列の挿入 | 8.文字列の挿入 | ||
- | text-anchor=" | + | text-anchor=" |
と、 | と、 | ||
- | dominant-baseline=" | + | dominant-baseline=" |
を使う? | を使う? | ||
行 178: | 行 145: | ||
</ | </ | ||
- | <text x=" | + | <text x=" |
+ | | ||
+ | </ | ||
</ | </ | ||
+ | 参考:[[https:// | ||
+ | https:// | ||
+ | {{: | ||
行 235: | 行 207: | ||
https:// | https:// | ||
+ | {{: | ||
elm/elm-clock.txt · 最終更新: 2019/06/28 by adash333