時計を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="0px" y="0px"
 viewBox="0 0 841.9 595.3"
 style="enable-background:new 0 0 841.9 595.3;"
 xml:space="preserve">

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


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="#000" stroke-width="5" fill-opacity="0"/>
\t\t<!-- 針 -->
\t\t<g transform="rotate(0)" id="m">
\t\t<path d="M8.42-57.14a3.5,3.5,0,0,0-3.58-2c.6-1.39,0-2.7-.84-3.9C2.56-74.3.38-141.36-.25-147-.87-141.36-3-74.3-4.49-63c-.87,1.2-1.45,2.51-.84,3.9a3.49,3.49,0,0,0-3.58,2,2.66,2.66,0,0,1,2.48.21,13.23,13.23,0,0,1,1,.89c-.61,4.93.66,3.54,2.17.69A3.33,3.33,0,0,0-2-56s1.25,2.18.7,3.48c0,0-2.15-1.07-4,1.6l1,.4a1.63,1.63,0,0,1,.94,1.38c0,.88-.88,1.73-1.62,2.41-.34.32-1,.67-1.22,1,0,0-1.18,1.29,1.19,7.94,1.64,4.59,2.7,5.32,3.45,7.85h.12V-5.31a5.29,5.29,0,0,0-4,5.13A5.3,5.3,0,0,0-1.54,5V14L-.25,25.47,1.05,14V5a5.3,5.3,0,0,0,4-5.13,5.29,5.29,0,0,0-4-5.13V-30h.12c.75-2.53,1.81-3.26,3.44-7.85,2.37-6.65,1.2-7.94,1.2-7.94-.21-.36-.88-.71-1.22-1C3.85-47.46,3-48.31,3-49.19a1.64,1.64,0,0,1,.93-1.38l1-.4c-1.86-2.67-4-1.6-4-1.6-.56-1.3.7-3.48.7-3.48a3.3,3.3,0,0,0,1.19.7C4.25-52.5,5.53-51.11,4.91-56c.36-.31.69-.65,1-.89A2.68,2.68,0,0,1,8.42-57.14ZM2-.18A2.27,2.27,0,0,1-.25,2.08,2.27,2.27,0,0,1-2.51-.18,2.27,2.27,0,0,1-.25-2.45,2.27,2.27,0,0,1,2-.18ZM1-48.28C-.51-47.94.35-46.82.64-46l0,.06a3.78,3.78,0,0,1,.14.76c1.45,1.7,1.33,3.92,1.1,5.72C1.72-38,1.46-36.6,1.19-35.2.9-34,.65-32.83.42-31.72H-.91c-.23-1.11-.48-2.29-.77-3.48-.27-1.4-.53-2.81-.71-4.23-.23-1.8-.35-4,1.1-5.72a3.78,3.78,0,0,1,.14-.76l0-.06c.29-.85,1.14-2-.33-2.31a6.49,6.49,0,0,0,1.21-2A6.62,6.62,0,0,0,1-48.28ZM-.09-56.19c-.06.13-.11.26-.16.38a3.73,3.73,0,0,0-.15-.38,19.33,19.33,0,0,1-1-2.92c.46-1,.86-2,1.18-2.73.33.77.73,1.72,1.18,2.73A19.15,19.15,0,0,1-.09-56.19Z" transform="rotate(180)"/>
\t\t</g>
\t\t<g transform="rotate(0)" id="h">
\t\t<path d="M-6.19-28.51c.32.15.64.37,1,.57-.84,3,.5,2.17,2.14.48a4.11,4.11,0,0,0,1.22-.4s1.16,1.37.55,2.14a4.6,4.6,0,0,0-4.09.86l.94.27c.54.22.91.51.87.86-.06.53-1,1-1.73,1.42a8.26,8.26,0,0,0-1.26.59s-1.24.76.83,4.86S-2.46-13.6-2-8.94c.13,1.43.27,3.08.42,4.67a5.29,5.29,0,0,0-3.46,5A5.29,5.29,0,0,0-.76,5.89c.23,3.43.62,8.57,1,10.73.36-2.16.75-7.3,1-10.73A5.29,5.29,0,0,0,5.52.69a5.3,5.3,0,0,0-3.46-5c.14-1.58.29-3.23.42-4.66.41-4.66,1.63-3.82,3.7-7.92S7-21.72,7-21.72a8.26,8.26,0,0,0-1.26-.59C5-22.7,4.07-23.2,4-23.73c0-.35.33-.64.87-.86l.94-.27a4.6,4.6,0,0,0-4.09-.86c-.61-.77.54-2.14.54-2.14a4.48,4.48,0,0,0,1.23.4c1.64,1.69,3,2.5,2.14-.48a11.22,11.22,0,0,1,1-.57,4.18,4.18,0,0,1,2.46-.2c-1.3-1.4-3.66-1.09-3.66-1.09.54-.86-.09-26.57-1-27.27C2.83-62.6,1.24-90.63.22-94.51-.8-90.63-2.4-62.6-4-57.07c-.92.7-1.56,26.41-1,27.27a4.73,4.73,0,0,0-3.67,1.09A4.21,4.21,0,0,1-6.19-28.51ZM.22-1.58A2.27,2.27,0,0,1,2.49.69,2.27,2.27,0,0,1,.22,3,2.26,2.26,0,0,1-2,.69,2.27,2.27,0,0,1,.22-1.58Zm0-23.69a4.39,4.39,0,0,0,1.84,2.15c-1.46.25-.55.9-.23,1.42l0,0a1.38,1.38,0,0,1,.18.46,3.14,3.14,0,0,1,1.36,3.44,23.28,23.28,0,0,1-.52,2.59A46.14,46.14,0,0,0,1.4-9L1-4.55a6.49,6.49,0,0,0-.78-.06,6.83,6.83,0,0,0-.79.06L-1-9a47.13,47.13,0,0,0-1.48-6.17c-.2-.86-.4-1.72-.52-2.59A3.15,3.15,0,0,1-1.6-21.21a2,2,0,0,1,.18-.46l0,0c.33-.52,1.24-1.17-.22-1.42A4.39,4.39,0,0,0,.22-25.27Zm-2.9-17.65c0-6.72,1.3-12.16,2.9-12.16s2.9,5.44,2.9,12.16c0,6.2-1.1,11.3-2.53,12.06l.94,1.17a8.45,8.45,0,0,1-.89,1.8,3.61,3.61,0,0,0-.42.9,4,4,0,0,0-.42-.9,9.07,9.07,0,0,1-.9-1.8c.35-.42.67-.82,1-1.17C-1.58-31.62-2.69-36.72-2.68-42.92Z" transform="rotate(180)"/>
\t\t</g>
\t\t<g transform="rotate(0)" id="s">
\t\t<polygon points="-3 -50, 3 -50, 0 190" fill="#000" />
\t\t</g>
\t\t<!-- 中心円 -->
\t\t<circle cx="0" cy="0" r="6" stroke="#000" stroke-width="4" fill="white"/>
\t</g>

EOD2;
print "\t<!-- メモリ -->\n";
print "\t<g transform=\"rotate(180)\" stroke=\"#000\" 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, プログラム, 仕事 タグ: , , パーマリンク