時計をsvgで書いてみた

?php
function svgstart(){
header('Content-type: image/svg+xml');
print <<<EOD1
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="layer1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 x="0" y="0"
 viewBox="0 0 410 410"
 xml:space="preserve">

EOD1;
}
function svgend() {
       print "</svg>\n";
}
// Main Program
svgstart();
$basex=205;
$basey=205;

print "<g transform=\"translate({$basex},{$basey})\">\n";
print "\t<!-- 数字 -->\n";
for($i=1;$i<=12;$i++) {
  $r = ($i<10) ? 0 : 3;
  $psin = sin(PI()*($i*30+270-$r)/180); $pcos = cos(PI()*($i*30+270-$r)/180);
  $x = (int)($pcos*165)-7; $y = (int)($psin*165)+8;
  print "\t<text x=\"{$x}\" y=\"{$y}\" font-size=\"24\">{$i}</text>\n";
}

print <<<EOD2
\t<g transform="rotate(180)">
\t\t<!-- 外側円 -->
\t\t<circle cx="0" cy="0" r="200" stroke="blue" stroke-width="5" fill-opacity="0"/>
\t\t<!-- 針 -->
\t\t<g transform="rotate(0)" id="h"><polygon points="0 -30, 15 0, 0 100,-15 0" fill="#99f" /></g>
\t\t<g transform="rotate(0)" id="m"><polygon points="0 -40, 10 0, 0 160,-10 0" fill="#99f" /></g>
\t\t<g transform="rotate(0)" id="s"><polygon points="0 -50, 7 0, 0 190,-7 0" fill="#99f" /></g>
\t\t<!-- 中心円 -->
\t\t<circle cx="0" cy="0" r="6" stroke="blue" stroke-width="4" fill="white"/>
\t</g>

EOD2;
print "\t<!-- メモリ -->\n";
print "\t<g transform=\"rotate(180)\" stroke=\"#99f\" stroke-width=\"3\">\n";
print "\t\t<!-- 長メモリ -->\n";
for($i=0;$i<360;$i+=30){
  $psin = sin(PI()*$i/180); $pcos = cos(PI()*$i/180);
  $x1 = (int)($psin*180); $y1 = (int)($pcos*180);
  $x2 = (int)($psin*198); $y2 = (int)($pcos*198);
  print "\t\t<line x1=\"{$x1}\" y1=\"{$y1}\" x2=\"{$x2}\" y2=\"{$y2}\" />\n";
}
print "\t\t<!-- 短メモリ -->\n";
for($i=0;$i<360;$i+=6){
  $psin = sin(PI()*$i/180); $pcos = cos(PI()*$i/180);
  $x1 = (int)($psin*190); $y1 = (int)($pcos*190);
  $x2 = (int)($psin*198); $y2 = (int)($pcos*198);
  print "\t\t<line x1=\"{$x1}\" y1=\"{$y1}\" x2=\"{$x2}\" y2=\"{$y2}\" />\n";
}
print "\t</g>\n";

print <<<EOD3
</g>
<script type="text/javascript">
<![CDATA[
let h = document.getElementById("h");
let m = document.getElementById("m");
let s = document.getElementById("s");
function tokei() {
  let t = new Date();
  h.setAttribute("transform","rotate("+(30*t.getHours()+t.getMinutes()/2)+")");
  m.setAttribute("transform","rotate("+6*t.getMinutes()+")");
  s.setAttribute("transform","rotate("+6*t.getSeconds()+")");
}
tokei();
setInterval("tokei()",1000);
]]>
</script>
EOD3;
svgend();
カテゴリー: Web, プログラム, 仕事 タグ: , , パーマリンク