差分

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

--- elm:elm-clock [2019/06/27] – [viewboxを調整して、時計の中心を(0, 0)としてみる] adash333
+++ elm:elm-clock [2019/06/28] (現在) – [viewboxを調整して、時計の中心を(0, 0)としてみる] adash333
@@ 行 1: / 行 1: @@
 ====== elmでアナログ時計 ======
+以下に記載させていただきました。
+http://i-doctor.sakura.ne.jp/font/?p=39013
+Elm0.19でアナログ時計
+年6月21日　2019年6月28日
+{{:elm:pasted:20190628-071547.png}}
 ===== svgについて =====
@@ 行 25: / 行 30: @@
-上記の引用ここから
-平行移動してから回転
-<code>
-<?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) にとり、
-度 回転された新たな座標系を確立する。 -->
-  <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) にとり、
-.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>
-</code>
-引用ここまで
 ===== ViewportとViewBoxについてのリンク =====
@@ 行 152: / 行 111: @@
 ==== viewboxを調整して、時計の中心を(0, 0)としてみる ====
+ソースコード
+<html>
+<script src="https://gist.github.com/adash333/80b8471e56440bfa35c21d2f583eab59.js"></script>
+</html>
 いちいち(100, 100) に平行移動するのが面倒なので、時計の中心を(0, 0)としてみたいと思います。
+（20190629追記→''%%<g></g>%%''や ''%%<symbol></symbol>%%''てくくって、後で一度にtransformで平行移動する方法があるそうです。）
   -svg width=“200px” height=“200px”
@@ 行 161: / 行 126: @@
   -文字を描くとき、座標の真ん中に、文字の真ん中がくるようにする
-といった感じでいけるのでは？あとで実際にやってみたいと思います。
+といった感じでいけるのでは？
+https://codepen.io/adash333/pen/gNXzJM
 参考：http://defghi1977.html.xdomain.jp/tech/svgMemo/svgMemo_08.htm
@@ 行 184: / 行 151: @@
 </code>
+参考：[[https://old-pine.net/html/svg%E6%8F%8F%E7%94%BB%E3%81%A7%E5%86%86%E3%81%AE%E4%B8%AD%E5%BF%83%E3%81%AB%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95|SVG描画で円の中心にテキストを表示する方法]]
 https://codepen.io/adash333/pen/gNXzJM
+{{:elm:pasted:20190628-060050.png}}
@@ 行 240: / 行 207: @@
 https://codepen.io/adash333/pen/vqZyLd
+{{:elm:pasted:20190628-062142.png}}