動畫 SVG<filter> 和<animate>在反應中

Question

我正在嘗試使用<animate>為<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>整個React 組件如下所示：

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進行了動畫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>