サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


elm:elm-clock


差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
elm:elm-clock [2019/06/28] – [svgについて] adash333elm:elm-clock [2019/06/28] (現在) – [viewboxを調整して、時計の中心を(0, 0)としてみる] adash333
行 1: 行 1:
 ====== elmでアナログ時計 ====== ====== elmでアナログ時計 ======
  
 +以下に記載させていただきました。
  
 +http://i-doctor.sakura.ne.jp/font/?p=39013
 +Elm0.19でアナログ時計
 +2019年6月21日 2019年6月28日
  
 +{{:elm:pasted:20190628-071547.png}}
  
 ===== svgについて ===== ===== svgについて =====
行 106: 行 111:
  
 ==== viewboxを調整して、時計の中心を(0, 0)としてみる ==== ==== viewboxを調整して、時計の中心を(0, 0)としてみる ====
 +
 +ソースコード
 +<html>
 +<script src="https://gist.github.com/adash333/80b8471e56440bfa35c21d2f583eab59.js"></script>
 +</html>
  
 いちいち(100, 100) に平行移動するのが面倒なので、時計の中心を(0, 0)としてみたいと思います。 いちいち(100, 100) に平行移動するのが面倒なので、時計の中心を(0, 0)としてみたいと思います。
 +(20190629追記→''%%<g></g>%%''や ''%%<symbol></symbol>%%''てくくって、後で一度にtransformで平行移動する方法があるそうです。)
  
   -svg width=“200px” height=“200px”   -svg width=“200px” height=“200px”
行 196: 行 207:
  
 https://codepen.io/adash333/pen/vqZyLd https://codepen.io/adash333/pen/vqZyLd
 +{{:elm:pasted:20190628-062142.png}}
  
  


elm/elm-clock.1561702315.txt.gz · 最終更新: 2019/06/28 by adash333

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki