如何解决SVG中嵌入JS实现时钟的repl.it运行异常问题？

问题说明 #

尝试用SVG+JS实现时钟功能（最初考虑CSS方案，最终选用JS），但代码在repl.it运行时仅显示XML文档树，添加CDATA标记后仍报错。

解决方案 #

• 将SVG嵌入HTML文档：单独的SVG文件在repl.it中会被当作XML文本解析，而非图形渲染。把SVG放在HTML的<body>标签内，让浏览器以HTML上下文处理。
• 修正SVG标签大小写：SVG遵循XML规范，标签大小写敏感，原代码中的animatetransform需改为animateTransform，否则浏览器无法识别动画元素。
• 修复拼写错误：原SVG根标签的tranform是拼写错误，改为正确的transform。
• 无需CDATA标记：在HTML嵌入的SVG中，脚本内容不需要CDATA包裹，直接编写即可。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<body>
<svg version="1.1" width="200" height="200" display="block" transform="translate(-50%,-50%)" xmlns="https://www.w3.org/2000/svg">
  <filter id="innerShadow" x="-20%" y="-20%" width="140%" height="140%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
    <feOffset in="blur" dx="2.5" dy="2.5" />
  </filter>
  <g>
    <circle
      id="shadow"
      style="fill:rgba(0,0,0,.1)"
      cx="97"
      cy="100"
      r="87"
      filter="url(#innerShadow)"
    ></circle>
    <circle
      id="circle"
      style="stroke:#fff;stroke-width:12px;fill:#20b7af"
      cx="100"
      cy="100"
      r="80"
    ></circle>
  </g>
  <g>
    <line
      x1="100"
      y1="100"
      x2="100"
      y2="55"
      transform="rotate(80 100 100)"
      style="stroke-width:3px;stroke:#fffbf9"
      id="hourhand"
    >
      <animateTransform
        attributeName="transform"
        attributeType="XML"
        type="rotate"
        dur="43200s"
        repeatCount="indefinite"
      />
    </line>
    <line
      x1="100"
      y1="100"
      x2="100"
      y2="40"
      style="stroke-width:4px;stroke:#fdfdfd"
      id="minutehand"
    >
      <animateTransform
        attributeName="transform"
        attributeType="XML"
        type="rotate"
        dur="3600s"
        repeatCount="indefinite"
      />
    </line>
    <line
      x1="100"
      y1="100"
      x2="100"
      y2="30"
      style="stroke-width:2px;stroke:#c1efed"
      id="secondhand"
    >
      <animateTransform
        attributeName="transform"
        attributeType="XML"
        type="rotate"
        dur="60s"
        repeatCount="indefinite"
      />
    </line>
  </g>
  <circle
    id="center"
    style="fill:#128a86;stroke:#c1efed;stroke-width:2px"
    cx="100"
    cy="100"
    r="3"
  ></circle>
  <line x1="100" y1="20" x2="100" y2="40" transform="rotate(30 100 100)" stroke="#ffffff"></line>
  <line x1="100" y1="20" x2="100" y2="40" transform="rotate(60 100 100)" stroke="#ffffff"></line>
  <line x1="100" y1="20" x2="100" y2="40" transform="rotate(90 100 100)" stroke="#ffffff"></line>
  <line x1="100" y1="20" x2="100" y2="40" transform="rotate(120 100 100)" stroke="#ffffff"></line>
  <line x1="100" y1="20" x2="100" y2="40" transform="rotate(150 100 100)" stroke="#ffffff"></line>
  <line x1="100" y1="20" x2="100" y2="40" transform="rotate(180 100 100)" stroke="#ffffff"></line>
  <line x1="100" y1="20" x2="100" y2="40" transform="rotate(210 100 100)" stroke="#ffffff"></line>
  <line x1="100" y1="20" x2="100" y2="40" transform="rotate(240 100 100)" stroke="#ffffff"></line>
  <line x1="100" y1="20" x2="100" y2="40" transform="rotate(270 100 100)" stroke="#ffffff"></line>
  <line x1="100" y1="20" x2="100" y2="40" transform="rotate(300 100 100)" stroke="#ffffff"></line>
  <line x1="100" y1="20" x2="100" y2="40" transform="rotate(330 100 100)" stroke="#ffffff"></line>
  <line x1="100" y1="20" x2="100" y2="40" transform="rotate(360 100 100)" stroke="#ffffff"></line>
  <script type="text/javascript">
    var hands = [];
    hands.push(document.querySelector('#secondhand > *'));
    hands.push(document.querySelector('#minutehand > *'));
    hands.push(document.querySelector('#hourhand > *'));
    
    function shifter(val) {
      return [val, 100, 100].join(' ');
    }
    
    var date = new Date();
    var hoursAngle = 360 * date.getHours() / 12 + date.getMinutes() / 2;
    var minuteAngle = 360 * date.getMinutes() / 60;
    var secAngle = 360 * date.getSeconds() / 60;
    hands[0].setAttribute('from', shifter(secAngle));
    hands[0].setAttribute('to', shifter(secAngle + 360));
    hands[1].setAttribute('from', shifter(minuteAngle));
    hands[1].setAttribute('to', shifter(minuteAngle + 360));
    hands[2].setAttribute('from', shifter(hoursAngle));
    hands[2].setAttribute('to', shifter(hoursAngle + 360));
  </script>
</svg>
</body>
</html>

内容的提问来源于stack exchange，提问作者user20080282