点击按钮

Question

假设我有一个SVG文件static.svg：

<svg class="machine-svg" width="100%" height="100%" viewBox="200 173 1784 1444" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Created with Sketch.</desc>
<defs>
    <rect id="path-1" x="0" y="16" width="118" height="63"></rect>
    <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="118" height="63" fill="white">
        <use xlink:href="#path-1"></use>
    </mask>
    . . . more elements here (my SVG file is so long I can't possibly paste it here) 
</svg>

和另一个CSS animation.css文件，其中包含所述SVG的动画。

.machine-svg{
  width: 100%;
  height: 100%;
  position: relative;
}

@media screen and ( max-width: -12px ) {
  .figure { transform: translate3D(40%, 50px, 0); }
}

@keyframes fall {
  100% { background-position: 0 300px;
  }
}

.shoes {
  transform: translateY(838px) translateX(550px);
  animation: shoes 4s 1.5s linear infinite;
  animation-duration: 15s;
}

@keyframes shoes {
  0% {
    transform: translateY(838px) translateX(550px) scaleY(1.00) scaleX(1.00);
  }
  25% {
    transform: translateY(838px) translateX(957px) scaleY(1.00) scaleX(1.00);
  }
  26% {
    transform: translateY(838px) translateX(957px) scaleY(0.0) scaleX(0.0);
  }
  100% {
    transform: translateY(838px) translateX(957px) scaleY(0.0) scaleX(0.0);
  }

}
. . . . . more animation here (also too long)

在页面中，SVG必须首先是静态的，这意味着没有动画。

所以用例必须是，当我点击页面上的按钮时，SVG开始动画：动画在所述CSS文件上。

在Javascript / React中是否可以在按钮的click事件上加载该文件上的CSS动画？

这是我的一次尝试。我尝试将上面的CSS（我转换成SCSS）导入另一个SCSS文件中的类。

import-svg {
  height: 800px;
  width: 800px;
  object-fit: cover;

  &--animate {
    @extend .import-svg;
    @import "animation";  //the animation.css above which I made animation.scss
  }
}

（下面的代码只是一个模型和合成，真正的代码要复杂得多）

import React from 'react';
import image from 'images/static.svg'; // The SVG file

class Upload extends Component {
    constructor(props) {
        super(props);
        this.state = {items: []};
    }
    upload() {
        this.setState({ . . adding contents to items here . . });
    }
    render() {
        return (
            <img className={"import-svg" + 
                 (this.state.items !== 'undefined' && this.state.items.length > 0 ?
                 "--animate" : "")} // The class that contains the imported animation.scss file
                 src={image}></img>
            <button onClick={this.upload.bind(this)}>Upload</button>
        )
    }
}

但它不起作用（显然）。但我想要做的全部要点与此类似。关于如何重做的任何想法？

我也对任何替代方案持开放态度，但将CSS动画重新编码为JavaScript应该是最后的选择，因为它需要时间（由于代码的长度）并且我没有太多时间可用。

（我还有一次尝试，我将CSS代码转换为React内联样式和SVG，在React组件SVGComponent下呈现。但我对如何从那里继续前进毫无兴趣）< / p>

PS。根据客户的请求，不允许使用jQuery。