Javascript 如何使用React为SVG组件中的新样式设置动画？

当用户将鼠标移到播放按钮上时，我尝试在

播放按钮组件

（svg）上执行一个简单的CSS样式动画，这样当鼠标移过/移出时，不透明度逐渐增加和减少。我正试图使用

OnMouseEnter

将样式道具传递给

播放按钮

，但我遇到了一些问题：

未激活

onmouseinter

方法（使用console.log进行测试），并且在传递我的造型道具时，我不确定如何使用

-webkit转换设置动画，或者是否可以使用React设置动画

这是我的播放按钮组件：

import React, { Component } from 'react';

class Play extends React.Component {

    static defaultProps = {
            fill: 'white',
            width: '100px',
            height: '100px',
            }

    render() {
        return (
            <svg width={this.props.width} height={this.props.height} viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <title>play</title>
                <defs></defs>
                <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                        <g id="play" transform="translate(-2.000000, -2.000000)" fill={this.props.fill} fillRule="nonzero" opacity="0.8">
                                <g id="Rounded" transform="translate(2.000000, 2.000000)">
                                        <path d="M8.8,13.9 L13.47,10.4 C13.74,10.2 13.74,9.8 13.47,9.6 L8.8,6.1 C8.47,5.85 8,6.09 8,6.5 L8,13.5 C8,13.91 8.47,14.15 8.8,13.9 Z M10,0 C4.48,0 0,4.48 0,10 C0,15.52 4.48,20 10,20 C15.52,20 20,15.52 20,10 C20,4.48 15.52,0 10,0 Z M10,18 C5.59,18 2,14.41 2,10 C2,5.59 5.59,2 10,2 C14.41,2 18,5.59 18,10 C18,14.41 14.41,18 10,18 Z" id="Shape"></path>
                                </g>
                        </g>
                </g>
            </svg>
        )
    }
}

export default (Play);

import React，{Component}来自'React'；
类播放扩展了React.Component{
静态defaultProps={
填充：“白色”，
宽度：“100px”，
高度：“100px”，
}
render（）{
返回(
玩
)
}
}
导出默认值（播放）；

这里是使用“我的播放”按钮的地方：

import React from 'react';

import { withStyles } from '@material-ui/core/styles';
import Play from '../assets/play.js'

const styles = () => ({
  playContainer: {
    position: 'absolute',
    top: 0, 
    left: 0,
    right: 0, 
    bottom: 0, 
    display: 'flex', 
    alignItems: 'center',
    justifyContent: 'center'
  },
})

const togglePlay = () => {
  console.log('hey')
}

class LandingPage extends React.PureComponent {

  render() {
    const classes = this.props.classes
    const style = {
      background: 'white',
      fill: 'black'
    }
    return (
            <div className={classes.playContainer}>
                    <Play style={style} onMouseEnter={this.togglePlay} />
            </div>
    );
  }
}

export default compose (withStyles(styles))(LandingPage);

从“React”导入React；
从“@material ui/core/styles”导入{withStyles}”；
从“../assets/Play.js”导入播放
常量样式=（）=>({
游戏容器：{
位置：'绝对'，
排名：0，
左:0,，
右:0,，
底部：0，
显示：“flex”，
对齐项目：“居中”，
为内容辩护：“中心”
},
})
常量切换播放=（）=>{
console.log（'hey'）
}
类LandingPage扩展了React.PureComponent{
render（）{
常量类=this.props.classes
常量样式={
背景：“白色”，
填充：“黑色”
}
返回(
);
}
}
导出默认组合（使用样式（样式））（登录页）；
实际播放按钮组件的可能副本在JSX中的任何地方都没有定义DOM外观的OnMouseCenter。仅仅因为您将其声明为属性值并不意味着它会被使用：您仍然需要在实际组件本身中设置鼠标输入监视。另外，如果保存
此
很重要，请改用
onmouseinter={e=>this.togglePlay（e）}
。