Question

我正在尝试使用<filter>为<animate>定义的阴影设置动画。动画应从mouse enter事件开始。

不幸的是，甚至在我将鼠标移到元素上之前，动画已经开始播放。

我在纯 HTML 中发现了this个示例：

<filter id="dilate">
    <feMorphology id="morph" operator="dilate" radius="0" />
</filter>
<animate 
  xlink:href="#morph"
  id="anim-dialiate" 
  attributeName="radius"
  from="40"
  to="0"
  dur="3s"
  fill="freeze"
/>

，并希望在React中实现类似的功能。不幸的是我看不到效果。

编辑：使用<animation>的整个反应组件如下：

import React from 'react'

export default function PatternNode(props) {
    function handleOnMouseEnter() {
        props.handleOnMouseEnter(props.data.id)
    }

    function handleOnMouseLeave() {
        props.handleOnMouseLeave()
    }

    return (
        <g
            onMouseEnter={handleOnMouseEnter.bind(this)}
            onMouseLeave={handleOnMouseLeave.bind(this)}
        >     
            <filter id="node_filter" height="130%">
                <feDropShadow 
                    id="node_shadow" 
                    dx="1" 
                    dy="1" 
                    stdDeviation="1" 
                    floodColor="gray" 
                    floodOpacity="0.8" 
                />
            </filter>
            <animate
                xlinkHref="#node_shadow"
                id="animate_node_shadow"
                attributeName="stdDeviation"
                from="0"
                to="0.8"
                dur="3s"
            />
            <circle 
                cx={props.data.x} 
                cy={props.data.y}
                r={props.styles.radius}
                fill={props.data.color}
                filter={props.selected ? "url(#node_filter)" : ""}
            />
        </g>
    )
}

编辑：floodOpacity似乎无法设置动画。因此，我为stdDeviation制作了动画，但是现在出现了一个问题，即动画是在鼠标进入元素之前开始的。

Answer 1

语法错误：

id必须唯一
应该有xlinkHref而不是xlink: href
在名称ID中，不应有连字符id = "node-shadow"，因为SVG会将其视为减号，并且动画不起作用。正确编写id =" node_shadow "

下面是dx过滤器属性的动画示例。
悬停

时动画开始

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
      width="800" height="250" viewBox="0 0 800 250" >  
 <defs>
  <filter id="filter_shadow"  height="130%">
    <feDropShadow 
        id="node_shadow" 
        dx="1" 
        dy="1" 
        stdDeviation="1" 
        floodColor="gray" 
        floodOpacity="0.8" 
    />
</filter>
</defs>
	  <path id="path1" fill="#39cb58" d="M332.8,20.3c-40.4,0-73.2,32.8-73.2,73.2l-0.1,1.6c0,51.3-41.6,93-93,93s-93-41.6-93-93l0-1.6c0-40.4-32.8-73.2-73.2-73.2l0-19.8c51.3,0,93,41.6,93,93l0,1.6c0,40.4,32.8,73.2,73.2,73.2s73.2-32.8,73.2-73.2l0.1-1.6c0-15,3.6-29.2,9.9-41.7C265,21.4,296.5,0.5,332.8,0.5V20.3z" filter="url(#filter_shadow)">
     
	 </path>
	   <animate id="animate_node_shadow" xlink:href="#node_shadow"  attributeName="dx"   values="1;3"  begin="path1.mouseover"  dur="1s" fill="freeze"/> 

	  
</svg>

动画stdDeviation

代码中仅更改属性attributeName =“ stdDeviation”

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
      width="800" height="250" viewBox="0 0 800 250" >  
 <defs>
  <filter id="filter_shadow" width="130%" height="130%">
    <feDropShadow 
        id="node_shadow" 
        dx="1" 
        dy="1" 
        stdDeviation="1" 
        floodColor="gray" 
        floodOpacity="0.8" 
    />
</filter>
</defs>


	  <path id="path1" fill="#39cb58" d="M332.8,20.3c-40.4,0-73.2,32.8-73.2,73.2l-0.1,1.6c0,51.3-41.6,93-93,93s-93-41.6-93-93l0-1.6c0-40.4-32.8-73.2-73.2-73.2l0-19.8c51.3,0,93,41.6,93,93l0,1.6c0,40.4,32.8,73.2,73.2,73.2s73.2-32.8,73.2-73.2l0.1-1.6c0-15,3.6-29.2,9.9-41.7C265,21.4,296.5,0.5,332.8,0.5V20.3z" filter="url(#filter_shadow)">
     
	 </path>
	   <animate id="animate_node_shadow" xlink:href="#node_shadow"  attributeName="stdDeviation"   values="1;5"  begin="path1.mouseover"  dur="1s" fill="freeze"> </animate>
  
</svg>

在React中使用<animate>为SVG <filter>设置动画

1 个答案: