javascript - 红圈在左上角开始前

Question

我的问题的灵感来自 this answer
红圈在左上角开始animateMotion动画之前。
以下是示例代码。

要启动动画，请单击 Canvas 上的任意位置。

<div id="pathContainer4">
			<svg id="svg1" 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 ;z-index=55>
  			         
        <animateMotion
		  dur="2s"
		  repeatCount="indefinite"
		  begin="svg1.click">
                 <mpath href="#motionpath2" />
             </animateMotion>
         </circle>
		</svg>
</div>

我试图通过向左移动 cx="-18"
隐藏 Canvas 外的红色圆圈但这没有帮助。红色圆圈开始在路径上方移动。

<div id="pathContainer4">
			<svg id="svg1" 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" cx="-18" r=8 fill=red ;z-index=55>
  			         
        <animateMotion
		  dur="2s"
		  repeatCount="indefinite"
		  begin="svg1.click">
                 <mpath href="#motionpath2" />
             </animateMotion>
         </circle>
		</svg>
</div>

如何让圆圈在动画开始前从SVG Canvas 的左上角消失？
这些标签中的任何解决方案都会有所帮助。

Answer 1

这样的事情怎么样(使用“set”):

<div id="pathContainer4">
  <svg id="svg1" 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" visibility="hidden">
      <set
        attributeType="XML"
        attributeName="visibility"
        to="visible"
        begin="svg1.click"
      />
      <animateMotion dur="2s" repeatCount="indefinite" begin="svg1.click">
        <mpath href="#motionpath2" />
      </animateMotion>
    </circle>
  </svg>
</div>

或者您可以使用 jQuery 来实现类似的效果(确保您将 id="red-circle"应用于您的 circle 元素):

  <script>
    $(document).ready(function() {
      const circle = $("#red-circle");
      circle.hide();

      $("#svg1").click(function() {
        circle.show();
      });
    });
  </script>