Пауза/воспроизведение SVG Не могу понять, почему это не работает...?
Мне нужно, чтобы код работал так же, как на эта страница.
Воспроизведение и приостановка 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 > 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
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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 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.
И вы не можете вызывать такие методы, как pauseAnimations(), на корневом узле html, потому что корневой узел html не понимает, что это значит.
Таким образом, современные браузеры могут отображать документы SVG, документы HTML (и многое другое), но вот что интересно: документы SVG могут жить внутри документов HTML.
Вы можете видеть, как document.documentElement может относиться к двум потенциальным вещам в зависимости от того, где был запущен код.
Понятно! Спасибо!
Хорошие новости! Я понял, что верхний код, который вы опубликовали, был JS, которого мне не хватало... Плохие новости; Я чувствую себя тупицей, потому что не понял, что это не просто часть сценария, как я сначала подумал! Спасибо! Ценю твою помощь!