如何解决如何沿路径为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 举报，一经查实，本站将立刻删除。