这个问题的灵感来自于答案。
红圈在动画开始前的左上角animateMotion。
下面是一个示例代码：
<div id="pathContainer4">
<button id="btn1" onclick="forwardSVG()">forward</button />
<button id="btn2" onclick="middleSVG()">Middle</button />
<button id="btn3" onclick="backSVG()">Back</button />
</div>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" height="160" width="360" >
<g fill="none" stroke="black" stroke-width="1">
<path stroke-dasharray="3" id="motionpath2"
d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" />
</g>
<circle class="circle2" r=8 fill=red>
<animateMotion
id="forward"
dur="2s"
begin="indefinite"
repeatCount="1"
keyPoints="0;1"
keyTimes="0;1"
calcMode="linear" >
<mpath href="#motionpath2" />
</animateMotion>
<animateMotion
id="middle"
dur="2s"
begin="indefinite"
repeatCount="1"
keyPoints="0.5;1"
keyTimes="0;1"
calcMode="linear" >
<mpath href="#motionpath2" />
</animateMotion>
<animateMotion
id="back"
dur="2s"
begin="indefinite"
repeatCount="1"
keyPoints="1;0"
keyTimes="0;1"
calcMode="linear" >
<mpath href="#motionpath2" />
</animateMotion>
</circle>
</svg>
<script>
var animation1 = document.getElementById("forward")
function forwardSVG(){
animation1.beginElement();
}
var animation2 = document.getElementById("middle")
function middleSVG(){
animation2.beginElement();
}
var animation3 = document.getElementById("back")
function backSVG(){
animation3.beginElement();
}
</script>我试图通过向左移动来隐藏画布上的红色圆圈cx="-18"。但这并没有帮助，红色圆圈在路径上方的动画期间开始移动。
<div id="pathContainer4">
<button id="btn1" onclick="forwardSVG()">forward</button >
<button id="btn2" onclick="middleSVG()">Middle</button >
<button id="btn3" onclick="backSVG()">Back</button >
</div>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" height="160" width="360" >
<g fill="none" stroke="black" stroke-width="1">
<path stroke-dasharray="3" id="motionpath2"
d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" />
</g>
<circle class="circle2" r="8" fill="red" cx="-18">
<animateMotion
id="forward"
dur="2s"
begin="indefinite"
repeatCount="1"
keyPoints="0;1"
keyTimes="0;1"
calcMode="linear" >
<mpath href="#motionpath2" />
</animateMotion>
<animateMotion
id="middle"
dur="2s"
begin="indefinite"
repeatCount="1"
keyPoints="0.5;1"
keyTimes="0;1"
calcMode="linear" >
<mpath href="#motionpath2" />
</animateMotion>
<animateMotion
id="back"
dur="2s"
begin="indefinite"
repeatCount="1"
keyPoints="1;0"
keyTimes="0;1"
calcMode="linear" >
<mpath href="#motionpath2" />
</animateMotion>
</circle>
</svg>
<script>
var animation1 = document.getElementById("forward")
function forwardSVG(){
animation1.beginElement();
}
var animation2 = document.getElementById("middle")
function middleSVG(){
animation2.beginElement();
}
var animation3 = document.getElementById("back")
function backSVG(){
animation3.beginElement();
}
</script>如何在动画开始之前使圆圈从SVG画布的左上角消失？
2019 年 12 月 16 日更新
感谢所有响应解决基本 SVG 问题的人。
但在我看来，每种解决方案都有一定的缺点：
- 使用 SVG 命令的解决方案：对画布大小
viewBox有translate限制。在其他尺寸下，运动路径或运动对象的修剪是可能的。 - JS 解决方案代码繁重，会干扰 SVG 动画过程
在动画开始前通过 看向隐藏球的方向CSS。JS
代码的范围应该是最小的，并且对于 SVG 画布的任何值都是通用的。
新帖子中接受了已经回答的参与者的其他答案。也欢迎新成员的新回应。
脑袋上
一个更加拐杖但可行的解决方案：将轨迹沿两个轴移动 10 个像素（这不适用于曲线，可以看出黑色新轨迹和橙色轨迹并不相同，但您可以通过以下方式计算公式点值应该是多少，我不擅长曲线），我们用CSS剪掉多余的部分。
Прячем элемент до начала анимации
<circle opacity="0"и показываем его после клика на любую из трех кнопок.В лоб так в лоб:
Не нашли отличий? А теперь внимательно посмотрите на
viewBox!好的，让我们试试：
translate(X Y)
Это решение для частного случая, когда возможно перемещение с целью скрыть объект движения до начала анимации.
Также этот пример помогает понять некоторые нюансы транcформации SVG
Исходный пример
Как видите вверху достаточно места для перемещения основной фигуры.
Двигаем фигуру вверх на
200pxtransform="translate(0 -200)"Фигура поднялась на
200px, но это не затронуло объект движения - красный шарик. Он продолжает двигаться по старой траектории, как будто и не было сдвига траектории.Корректируем начальное положение красного шарика
Вот еще один приемлемый вариант с opacity, но тут есть один глюк - при запуске новой анимации раньше завершения предыдущей.