我想，對于特定事件，例如 onclick，作為特定的 SVG 元素，更改該 SVG 的animateMotion元素并再次播放該影片。我當前的代碼確實正確重播影片，但不會更改路徑屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SVG Example</title>
<style>
* { padding: 0; margin: 0; }
</style>
</head>
<body>
<script>
window.addEventListener("click", function(e){
var dot = document.getElementById("reddot");
dot.path = 'M 0 0 H ' (e.clientX) ' V ' (e.clientY);
dot.beginElement();
});
</script>
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<circle cx="0" cy="0" r="2" fill="red">
<animateMotion dur="5s" id="reddot" repeatCount="1" path="M 0 0 H 10 V 10" restart="always" />
</circle>
</svg>
</body>
</html>
多次單擊會多次播放影片，但path不會改變。這樣做的具體目標是創建一個影片，其中影片移動到滑鼠單擊的位置。
uj5u.com熱心網友回復：
的 DOM 類<animateMotion是SVGAnimateMotionElement. 該類沒有path屬性（請參閱檔案）。dot.path = "..."無所作為也是如此。
使用dot.setAttribute("path", "...")來代替。
window.addEventListener("click", function(e){
var dot = document.getElementById("reddot");
dot.setAttribute("path", 'M 0 0 H ' (e.clientX) ' V ' (e.clientY));
dot.beginElement();
});* { padding: 0; margin: 0; }<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<circle cx="0" cy="0" r="2" fill="red">
<animateMotion dur="5s" id="reddot" repeatCount="1" path="M 0 0 H 10 V 10" restart="always" />
</circle>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/375852.html
標籤：javascript svg
上一篇：如果未找到影像的回退