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>

当我尝试在代码笔上播放时，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中使用？我可以看到您发布的链接是使用自己的内联javascript（在script标签中）到SVG document的。

该脚本在SVG根元素上调用一些SVGElement方法，例如document.documentElement.pauseAnimations();。但是document element到底是什么？

Document.documentElement返回的Element是文档的根元素（例如，HTML文档的元素）。

由于此代码是在SVG文档中调用的，因此document.documentElement返回svg根节点。但是，由于codepen是HTMl文档，因此document.documentElement将返回html根节点。

并且您无法在html根节点上调用类似pauseAnimations()的方法，因为html根节点不理解这意味着什么。

因此，现代的浏览器可以显示SVG文档，HTML文档（以及更多），但这里有一个关键点：SVG文档可以存在于HTML文档的内部。

您可以看到document.documentElement如何根据运行代码的位置来引用两个潜在的事物。

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

1 个答案: