javascript - SVG 暂停/播放 无法弄清楚为什么这不起作用...？

Question

我需要代码才能像在 this page 上一样工作.

SVG 的播放和暂停。我进入检查并提取了所有我能提取的代码，这些代码似乎是 HTML。我看不到或找不到 CSS 或 Javascript。不确定这是否正常。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="80 0 1024 768" onload="t=setInterval(updateTimer, 100)">
  
<script>
  var time = 0;
  function updateTimer() {
    //document.getElementById("t").textContent = document.documentElement.getCurrentTime().toFixed(0) + "s";
  }
  function pause() {
    time = document.documentElement.getCurrentTime();
    document.documentElement.pauseAnimations();
    clearInterval(t);
  }
  function play() {
    if(time &gt; 0)
      document.documentElement.setCurrentTime(time);

    clearInterval(t);
    t=setInterval(updateTimer, 100);    
    document.documentElement.unpauseAnimations();
  }
  function stop() {
    time = 0;
    clearInterval(t);
    document.documentElement.setCurrentTime(0); 
    document.documentElement.pauseAnimations();
  }
  </script>
  
<linearGradient id="grad">
    <stop stop-color="rgb(10%,80%,10%)" offset="0"/>
    <stop stop-color="rgb(10%,40%,20%)" offset="0.4"/>
    <stop stop-color="rgb(10%,90%,30%)" offset="0.7"/>
    <stop stop-color="rgb(10%,50%,40%)" offset="1"/>
  </linearGradient>
  
<rect fill="url(#grad)" width="0%" height="50" x="100" y="300" rx="5">
    <animate attributeName="width" to="100%" begin="0s" dur="30s"/>
  </rect>
  
<text id="t" style="font:24px Arial Black;fill:white;stroke:black" transform="translate(100 334)"/>
  
<animateTransform type="translate" attributeName="transform" xlink:href="#t" begin="1s" dur="29s" from="100 334" to="1024 334"/>
  
<g transform="translate(100 500)">
    
<!-- Play -->
  	<g onclick="play()">
  	  <rect width="40" height="40" rx="10" stroke="black" fill-opacity="0.5"/>
  	  <path id="play" d="M12 5l20 15l-20 15Z" fill="white" pointer-events="none"/>
  	</g>
  	
<!-- Pause -->
  	<g transform="translate(50 0)">
  	  <rect width="40" height="40" rx="10" stroke="black" fill-opacity="0.5" onclick="pause();"/>
  	  <path id="pause" d="M14 10l0 20M26 10l0 20" stroke="white" fill="none" stroke-width="8" pointer-events="none"/>
  	</g>
  	
<!-- Stop (rewind and pause) -->
  	<g transform="translate(100 0)">
  	  <rect width="40" height="40" rx="10" stroke="black" fill-opacity="0.5" onclick="stop()"/>
  	  <rect x="10" y="10" width="20" height="20" fill="white" pointer-events="none"/>
  	</g>
  </g>
</svg>

当我尝试在 Code pen 上播放时，SVG 可以播放但按钮不起作用。完全没有。我认为“onclick”可以做到...？

这是因为 JS 无法访问/应用吗？我没有看到任何“DIV”或“DOM”，所以我认为它不是 CSS 的东西......

我对 HTML 有基本的了解，对 CSS 了解较少，对 JavaScript 一无所知

Answer 1

简短版本:必须在 SVG 节点上调用 getCurrentTime 和 setCurrentTime。

const mySvg = document.getElementById("mySvg")

function updateTimer() {
  const t = `${mySvg.getCurrentTime().toFixed(0)}s`;
  document.getElementById("t").textContent = t;
}

function setCurrentTime(t) {
  mySvg.setCurrentTime(t)
}

function pause() {
  mySvg.pauseAnimations()
}

function play() {
  mySvg.unpauseAnimations()
}

function stop() {
  clearInterval();
  setCurrentTime(0);
  mySvg.pauseAnimations()
  updateTimer();
}

<svg id="mySvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="80 0 1024 768" onload="t=setInterval(updateTimer, 100)">
  <linearGradient id="grad">
    <stop stop-color="rgb(10%,80%,10%)" offset="0"/>
    <stop stop-color="rgb(10%,40%,20%)" offset="0.4"/>
    <stop stop-color="rgb(10%,90%,30%)" offset="0.7"/>
    <stop stop-color="rgb(10%,50%,40%)" offset="1"/>
  </linearGradient>
  <rect fill="url(#grad)" width="0%" height="50" x="100" y="300" rx="5">
    <animate attributeName="width" to="100%" begin="0s" dur="30s"/>
  </rect>
  <text id="t" style="font:24px Arial Black;fill:white;stroke:black" transform="translate(100 334)"/>
  <animateTransform type="translate" attributeName="transform" xlink:href="#t" begin="1s" dur="29s" from="100 334" to="1024 334"/>
  <g transform="translate(100 500)">
    <!-- Play -->
    <g onclick="play()">
     <rect width="40" height="40" rx="10" stroke="black" fill-opacity="0.5"/>
     <path id="play" d="M12 5l20 15l-20 15Z" fill="white" pointer-events="none"/>
   </g>
   <!-- Pause -->
   <g transform="translate(50 0)">
     <rect width="40" height="40" rx="10" stroke="black" fill-opacity="0.5" onclick="pause();"/>
     <path id="pause" d="M14 10l0 20M26 10l0 20" stroke="white" fill="none" stroke-width="8" pointer-events="none"/>
   </g>
   <!-- Stop (rewind and pause) -->
   <g transform="translate(100 0)">
     <rect width="40" height="40" rx="10" stroke="black" fill-opacity="0.5" onclick="stop()"/>
     <rect x="10" y="10" width="20" height="20" fill="white" pointer-events="none"/>
   </g>
 </g>
</svg>

长版:毕竟，为什么它不能在 Codepen 中工作？ 我可以看到您发布的链接指向 SVG document带有它自己的内联 JavaScript(在脚本标签中)。

脚本调用了一些 SVGElement使用 document.documentElement.pauseAnimations(); 的 SVG 根元素上的方法。 但是document element到底是什么？ ？

Document.documentElement returns the Element that is the root element of the document (for example, the element for HTML documents).

因为这段代码是在 SVG 文档中调用的，所以 document.documentElement 返回 SVG 根节点。但是，因为 codepen 是一个 HTML 文档，document.documentElement 将返回 HTML 根节点。

而且您不能在 HTML 根节点上调用像 pauseAnimations() 这样的方法，因为 HTML 根节点不理解这些方法。

因此，现代浏览器可以显示 SVG 文档、HTML 文档(以及更多)，但更重要的是:SVG 文档可以存在于 HTML 文档内部。

您可以看到 document.documentElement 如何根据运行 JavaScript 代码的文档类型来引用两个潜在的事物。