Анимация SVG <filter>с <animate>в реакции

Question

Я пытаюсь анимировать тень, определенную <filter>, используя <animate>.Анимация должна начинаться с события mouse enter.

К сожалению, анимация начинается еще до того, как я наведу указатель мыши на элемент.

Я нашел этот пример в чистом виде HTML :

<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

Синтаксические ошибки:

1. id в коде должно быть уникальным

2. Вместо xlinkHref должно быть xlink: href

3. В имени 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>