SVG pause / play Не можете понять, почему это не работает ...?

Question

Мне нужен код, чтобы работать так же, как на этой странице .

Воспроизведение и приостановка 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

Короткая версия: getCurrentTime и setCurrentTime должны вызываться на узле SVG.

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 с собственным встроенным JavaScript (в теге script).

Этот скрипт вызывает некоторые SVGElement методы для корневого элемента SVG, такие как document.documentElement.pauseAnimations();. Но что такое элемент документа ?

Document.documentElement возвращает элемент, являющийся корневым элементом документа (например, элемент для документов HTML).

Поскольку этот код был вызван внутри документа SVG, document.documentElement возвращает корневой узел svg. Однако, поскольку codepen является документом HTMl, document.documentElement вернет корневой узел html.

И вы не можете вызывать методы, такие как pauseAnimations(), на корневом узле html, потому что корневой узел html не понимает, что это значит.

Таким образом, современные браузеры могут отображать документы SVG, документы HTML (и многое другое), но вот главный момент: документы SVG могут жить внутри документов HTML.

Вы можете видеть, как document.documentElement может ссылаться на две потенциальные вещи в зависимости от того, где был выполнен код.