差分

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

--- elm:elm-clock [2019/06/25] – [ViewportとViewBoxについてのリンク] 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: @@
-上記の引用ここから
-平行移動してから回転
+===== ViewportとViewBoxについてのリンク =====
-<code>
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+Viewportは描画範囲、ViewBoxは表示範囲といったイメージでしょうか？（viewboxの原点に負の値を指定しても、図形などは表示されるようですが）
-  "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表示範囲についてのリンク =====
 個人的に、最初に
 <code>
 viewbox="0 0 200 200"
@@ 行 81: / 行 45: @@
 <code>
-viewbox="x y width height"
+svg width="vp-width" height="vp-height" viewbox="x y vb-width vb-height"
 </code>
-のように、最初の2つの引数で、
+のようにかくと、viewboxの最初の2つの引数x, yで、
+<code>
+表示範囲の左上の座標を(x, y)
+</code>
+と指定し、後半の2つの引数vb-width vb-heightで、
+<code>
+vp-widthをvb-widthで割った値をx軸方向の単位長さとする
+vp-heightをvb-heightで割った値をy軸方向の単位長さとする
+</code>
+ということを表すようです。（間違っていたらごめんなさい！）
 https://wemo.tech/1520
@@ 行 131: / 行 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”
   -viewbox=“-100 -100 200 200”
-  -
+  -中心が(100, 100)、半径100の円を描く
+  -座標(80cos30ﾟ, -80sin30ﾟ)に、文字『2』を描く
+  -文字を描くとき、座標の真ん中に、文字の真ん中がくるようにする
+といった感じでいけるのでは？
+https://codepen.io/adash333/pen/gNXzJM
+参考：http://defghi1977.html.xdomain.jp/tech/svgMemo/svgMemo_08.htm
+svg要素の基本的な使い方まとめ
+.文字列の挿入
+text-anchor="middle" （指定座標に対して横方向に真ん中）
+と、
+dominant-baseline="middle" （指定座標に対して縦方向に真ん中）
+を使う？
+<code>
+<text x="100" y="100" text-anchor="middle">
+    本日は晴天なり
+</text>
+<text x="150" y="175" dominant-baseline="middle">
+    あ:middle
+</text>
+</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}}
@@ 行 179: / 行 207: @@
 https://codepen.io/adash333/pen/vqZyLd
+{{:elm:pasted:20190628-062142.png}}