时间戳

首页 > 解决方案 > 沿着路径动画箭头

html - 沿着路径动画箭头

问题描述

我一直在尝试用箭头沿着路径创建动画。实际上，我希望我的箭头在我的绿色带内无限移动。下面的代码显示了我目前所拥有的（更新）

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1300" height="700" viewBox="0 0 1300 700">
  <defs>

  </defs>
   <g id="Groupe" data-name="Group" transform="translate(512.109 319.792)">
    <!-- BC -->
      <path id="a" data-name="a" d="M3714.536-1433,3533-1342.232l21.048,10.524,181.536-90.768Z" transform="translate(-3533 1433)" fill="#00817a"/>
      <path id="b" data-name="b" d="M572,76.764,585.529,70l12.4,2.067,4.134,6.2-13.529,6.764-4.133-6.2Z" transform="translate(-562.599 10.998)" fill="#000">
      <animateTransform
        attributeType="XML" 
        attributeName="transform" 
        type="translate"
        dur="4s" 
        repeatCount="indefinite"
        begin="0s; click"
        values="-562.599, 10.998;

                -431.051 -54.776">      
     </animateTransform> 
     </path>
      <path id="c" data-name="c" d="M572,76.764,585.529,70l12.4,2.067,4.134,6.2-13.529,6.764-4.133-6.2Z" transform="translate(-536.289 -2.156)" fill="#000">
        <animateTransform
          attributeType="XML" 
          attributeName="transform" 
          type="translate"
          dur="4s" 
          repeatCount="indefinite"
          begin="0s; click"
          values="-536.289, -2.156;

                  -457.361 -41.622">      
      </animateTransform> 
     </path>
      <path id="d" data-name="d" d="M572,76.764,585.529,70l12.4,2.067,4.134,6.2-13.529,6.764-4.133-6.2Z" transform="translate(-509.98 -15.311)" fill="#f8f8f8">
        <animateTransform
          attributeType="XML" 
          attributeName="transform" 
          type="translate"
          dur="4s" 
          repeatCount="indefinite"
          begin="0s; click"
          values="-509.98, -15.311;

                  -431.051 -54.776">      
      </animateTransform> 
     </path>
      <path id="e" data-name="e" d="M572,76.764,585.529,70l12.4,2.067,4.134,6.2-13.529,6.764-4.133-6.2Z" transform="translate(-483.67 -28.466)" fill="#f8f8f8">
      <animateTransform
          attributeType="XML" 
          attributeName="transform" 
          type="translate"
          dur="4s" 
          repeatCount="indefinite"
          begin="0s; click"
          values="-483.67, -28.466;

                  -431.051 -54.776">      
      </animateTransform> 
     </path>
      <path id="f" data-name="f" d="M572,76.764,585.529,70l12.4,2.067,4.134,6.2-13.529,6.764-4.133-6.2Z" transform="translate(-457.361 -41.621)" fill="#f8f8f8">
      <animateTransform
          attributeType="XML" 
          attributeName="transform" 
          type="translate"
          dur="4s" 
          repeatCount="indefinite"
          begin="0s; click"
          values="-457.361, -41.621;

                  -431.051 -54.776">      
      </animateTransform> 
     </path>
      <path id="g" data-name="g" d="M572,76.764,585.529,70l12.4,2.067,4.134,6.2-13.529,6.764-4.133-6.2Z" transform="translate(-431.051 -54.776)" fill="#f8f8f8">
      <animateTransform
          attributeType="XML" 
          attributeName="transform" 
          type="translate"
          dur="4s" 
          repeatCount="indefinite"
          begin="0s; click"
          values="-431.051, -54.776;

                  -431.051 -54.776">      
      </animateTransform> 
     </path>

    </g>
</svg>

我尝试的是手动更改每个动画的值。我没有找到一致的结果

标签： htmlanimationsvg

解决方案

我会animateTransform在这种情况下使用。我希望这是你需要的，虽然我不太确定。

<svg viewBox="0 0 220 220">
  <defs>

  </defs>
   <g id="Groupe" data-name="Group" >
    <!-- BC -->
      <path id="a" data-name="a" d="M3714.536-1433,3533-1342.232l21.048,10.524,181.536-90.768Z" transform="translate(-3533 1433)" fill="#00817a"/>
      
      <path id="c" data-name="c" d="M572,76.764,585.529,70l12.4,2.067,4.134,6.2-13.529,6.764-4.133-6.2Z" transform="translate(-536.289 -2.156)" fill="#f8f8f8"/>
      <path id="d" data-name="d" d="M572,76.764,585.529,70l12.4,2.067,4.134,6.2-13.529,6.764-4.133-6.2Z" transform="translate(-509.98 -15.311)" fill="#f8f8f8"/>
      <path id="e" data-name="e" d="M572,76.764,585.529,70l12.4,2.067,4.134,6.2-13.529,6.764-4.133-6.2Z" transform="translate(-483.67 -28.466)" fill="#f8f8f8"/>
      <path id="f" data-name="f" d="M572,76.764,585.529,70l12.4,2.067,4.134,6.2-13.529,6.764-4.133-6.2Z" transform="translate(-457.361 -41.621)" fill="#f8f8f8"/>
      <path id="g" data-name="g" d="M572,76.764,585.529,70l12.4,2.067,4.134,6.2-13.529,6.764-4.133-6.2Z" transform="translate(-431.051 -54.776)" fill="#f8f8f8"/>
    </g>
     <path id="b" data-name="b" d="M572,76.764,585.529,70l12.4,2.067,4.134,6.2-13.529,6.764-4.133-6.2Z" transform="translate(-562.599 10.998)" fill="#000">
       <animateTransform
    attributeType="XML" 
    attributeName="transform" 
    type="translate"
    dur="4s" 
    repeatCount="indefinite"
    begin="0s"
    values="-562.599, 10.998;
            
            -431.051 -54.776">  
        
     </animateTransform>   
     </path>
</svg>

推荐阅读