如何沿路径为SVG fePointLight设置动画

问题描述

我可以成功地沿路径设置对象的动画，但是我正在尝试使fePointLight沿路径移动的动画。我可以使用带有animate的简单values为其设置动画，但不能为定义的路径设置动画。

这是我的代码，用于尝试使用animateMotion引用#path元素进行动画制作）

<!DOCTYPE html>
<html>
<body>

<svg height="450" width="400">
  <filter id="path-spot-light">
    
    <!-- Follows #path -- DOES NOT WORK-->
    <feGaussianBlur stdDeviation="3" result="blur" />
        <fespecularLighting result="spec" in="blur" specularExponent="35" lighting-color="#cccccc">
        <!--Light source effect-->
        <fePointLight x="75" y="100" z="50">
          <!--Lighting Animation-->
          <animateMotion dur="3s" repeatCount="indefinite">
            <mpath xlink:href="#path"></mpath>
          </animateMotion>
        </fePointLight>
    </fespecularLighting>
    <!--Composition of inputs-->
    <feComposite in="SourceGraphic" in2="spec" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="comp1"/>
    
    
  </filter>

  <rect x="0"   y="0"  width="400" height="450" rx="5" ry="5" fill="blue" filter="url(#path-spot-light)"/>
  
  <path id="path"  d="M200,0 L200,150 L350,350 L400,400" stroke="#9c9696" stroke-width="3" fill="none"/>
  
  <circle cx="" cy="" r="8" fill="#529fd9" >
    <animateMotion dur="3s" repeatCount="indefinite">
      <mpath xlink:href="#path"></mpath>
    </animateMotion>
  </circle>
  
</svg>

</body>
</html>

以下是使用animate和简单的values进行动画制作的代码，但未引用#path

<!DOCTYPE html>
<html>
<body>

<svg height="450" width="400">
  <filter id="diagonal-spot-light">
    <!--Blur effect-->
    <feGaussianBlur stdDeviation="3" result="blur1" />
    <!--Lighting effect-->
    <fespecularLighting result="spec1" in="blur1" specularExponent="35" lighting-color="#cccccc">
        <!--Light source effect-->
        <fePointLight x="75" y="100" z="50">
          <!--Lighting Animation-->
          <animate attributeName="x" values="0;400" dur="3s" repeatCount="indefinite" />
          <animate attributeName="y" values="0;450" dur="3s" repeatCount="indefinite" />
        </fePointLight>
    </fespecularLighting>
    
    <!--Composition of inputs-->
    <feComposite in="SourceGraphic" in2="spec1" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="comp1"/>
    
  </filter>

  <rect x="0"   y="0"  width="400" height="450" rx="5" ry="5" fill="blue" filter="url(#diagonal-spot-light)"/>
  
  <path id="diagonal-path"  d="M0,0  L400,450" stroke="#9c9696" stroke-width="3" fill="none"/>
  
  <circle cx="" cy="" r="8" fill="#529fd9">
    <animateMotion dur="3s" repeatCount="indefinite">
      <mpath xlink:href="#diagonal-path"></mpath>
    </animateMotion>
  </circle>
  
</svg>

</body>
</html>

如何沿路径设置fePointLight的动画？

===编辑=== 感谢@enxaneta，我能够正确地应用动画。

这是我的更新版SVG，其中fePointLight沿路径设置了动画。

<!DOCTYPE html>
<html>
<body>

<svg height="450" width="400">
  <filter id="path-spot-light">
    <feGaussianBlur stdDeviation="3" result="blur" />
        <fespecularLighting result="spec" in="blur" specularExponent="35" lighting-color="#529fd9">
        <fePointLight z="50"></fePointLight>
    </fespecularLighting>
    <feComposite in="SourceGraphic" in2="spec" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="comp1"/>
  </filter>

  <rect x="0"   y="0"  width="400" height="450" rx="5" ry="5" fill="blue" />
  
  <circle cx="" cy="" r="200"  fill="blue" filter="url(#path-spot-light)">
    <animateMotion dur="3s" repeatCount="indefinite">
      <mpath xlink:href="#path"></mpath>
    </animateMotion>
  </circle>
  <path id="path"  d="M200,400" stroke="#9c9696" stroke-width="3" fill="none"/>
  
  
  
  <circle cx="" cy="" r="8" fill="#529fd9" >
    <animateMotion dur="3s" repeatCount="indefinite">
      <mpath xlink:href="#path"></mpath>
    </animateMotion>
  </circle>
  
</svg>

</body>
</html>

===结束编辑===

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

svg svg svg svg-animate svg-filters

如何沿路径为SVG fePointLight设置动画

问题描述

解决方法

相关问答