Show SVG Clock in Panorama

paranorama-svg-clock.js

/**
 *@see http://realtech.burningbird.net/graphics/svg/experiments-svg-clock
 */
let SVG_NS = "http://www.w3.org/2000/svg";
let XHTML_NS = "http://www.w3.org/1999/xhtml";
let CLOCK_SVG =
<svg version="1.1" width="250" height="250" xmlns={SVG_NS} viewBox="0 0 3 3" id="svg_clock">
  <defs>
    <style type="text/css"><![CDATA[
      path {
        stroke: black;
        stroke-width: 0.02;
        fill: none;
      }
      line {
        stroke-linecap: round;
      }

      #seconds {
        stroke: maroon;
        stroke-width: 0.02;
      }
      #minutes {
        stroke: black;
        stroke-width: 0.03;
      }
      #hours {
        stroke: black;
        stroke-width: 0.03;
      }
    ]]></style>
    <!-- outer silver band -->
    <linearGradient id="gg1">
     <stop stop-color="#333" offset="0" />
     <stop stop-color="#eee" offset="100%" />
    </linearGradient>

    <!-- highlight -->
    <linearGradient id="gg2" x1="0" y1="1" x2="1" y2="0">
     <stop stop-color="white" stop-opacity="0" offset="50%" />
     <stop stop-color="white" offset="100%"  />
    </linearGradient>

    <!-- shadow effect -->
    <linearGradient id="gg3">
     <stop stop-color="lightpink" offset="0" />
     <stop stop-color="mistyrose" offset="50%" />
    </linearGradient>

    <!-- drop shadow -->
    <filter id="shadow">
       <feGaussianBlur stdDeviation="0.08" result="blur" />
    </filter>
  </defs>
  <g transform="rotate(-90) translate(-1.3,1.3) ">
    <!-- shadow -->
    <circle cx="-0.05" cy="0.01" fill="#333333"  r="1.14" filter="url(#shadow)" />
    <!-- outer silvered band -->
    <circle cx="0" cy="0" r="1.2" fill="url(#gg1)" stroke-width="0.02" stroke="black"  />
    <!-- clock interior -->
    <circle cx="0" cy="0" r="1.0" fill="mistyrose" />
    <!-- interior shadow -->
    <circle cx="-0.1" cy="0" r="0.91" fill="url(#gg3)" />
    <!-- decorative border -->
    <circle cx="0" cy="0" r="1.0" fill-opacity="0"  stroke-width="0.04" stroke-dasharray="0.01,0.02,0.01" stroke="black" />
    <!-- tick marks -->
    <path d="
            M  1.000  0.000 L  0.900  0.000
            M  0.866  0.500 L  0.779  0.450
            M  0.500  0.866 L  0.450  0.779
            M  0.000  1.000 L  0.000  0.900
            M -0.500  0.866 L -0.450  0.779
            M -0.866  0.500 L -0.779  0.450
            M -1.000  0.000 L -0.900  0.000
            M -0.866 -0.500 L -0.779 -0.450
            M -0.500 -0.866 L -0.450 -0.779
            M  0.000 -1.000 L  0.000 -0.900
            M  0.500 -0.866 L  0.450 -0.779
            M  0.866 -0.500 L  0.779 -0.450" />
    <!-- clock hands -->
    <line id="hours"   x1="0" y1="0" x2="0.70" y2="0"/>
    <line id="minutes" x1="0" y1="0" x2="0.85" y2="0"/>
    <line id="seconds" x1="0" y1="0" x2="0.90" y2="0"/>
    <!-- reflection -->
    <circle cx="0.5" cy="-0.25" r="0.8" fill="url(#gg2)" />
  </g>
  <script><![CDATA[
  ]]></script>
</svg>;

function xmlToDOM (xml, doc, xmlns) {
  XML.prettyPrinting = false;
  XML.ignoreWhitespace = true;
  var d = (new DOMParser).parseFromString(
    <root xmlns={xmlns || XHTML_NS}>{xml}</root>.toString(),
    "application/xml");
  var imported = doc.importNode(d.documentElement, true);
  var range = doc.createRange();
  range.selectNodeContents(imported);
  var fragment = range.extractContents();
  range.detach();
  return fragment.childNodes.length > 1 ? fragment : fragment.firstChild;
}

TabView._initFrame(function() {
  let doc = TabView._window.document;
  let svg = xmlToDOM(CLOCK_SVG, doc, SVG_NS);
  doc.body.appendChild(svg);
  svg.setAttribute("style", "position: absolute; bottom: 10px; right: 10px;");
  clockStart(doc);
});


function clockStart(doc) {
  var seconds = doc.getElementById("seconds");
  var minutes = doc.getElementById("minutes");
  var hours   = doc.getElementById("hours");

  function setClock() {
    var date = new Date;
    var s = (date.getSeconds() + date.getMilliseconds() / 1000) * Math.PI / 30;
    var m = date.getMinutes() * Math.PI / 30 + s / 60;
    var h = date.getHours() * Math.PI / 6 + m / 12;

    seconds.setAttribute("x2", 0.90 * Math.cos(s));
    seconds.setAttribute("y2", 0.90 * Math.sin(s));
    minutes.setAttribute("x2", 0.65 * Math.cos(m));
    minutes.setAttribute("y2", 0.65 * Math.sin(m));
    hours  .setAttribute("x2", 0.40 * Math.cos(h));
    hours  .setAttribute("y2", 0.40 * Math.sin(h));
  }

  setInterval(setClock, 1000);
}