Блог

Предположим, у меня есть файл 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 загружать анимацию CSS в этот файл при событии нажатия кнопки?

Это была одна из моих попыток. Я попытался импортировать приведенный выше CSS (который я преобразовал в SCSS) в класс в другом файле SCSS.

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

  amp;--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' amp;amp; 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 . Но я понятия не имею, как действовать дальше)

PS. jQuery не разрешен по запросу клиента.