2016-05-23 5 views
0

Я играл с загрузкой изображений и нашел SvgCircus - в основном это позволяет вам создавать анимированные SVG. Here's пример одного, который я сгенерировал.Встраивание анимированного SVG в компонент React

Если я просто поместил этот svg в свой index.html, он отлично работает. Однако, если я попытаюсь использовать его в компоненте React, я могу получить только статическое изображение - без анимации. Я попробовал это, используя параметр dangerouslySetInnerHTML в диапазоне для загрузки исходной строки и <use xlinkHref={filename}></use>, но оба они загружают статическое изображение. Я новичок в React, но я думаю, что javascript, который поставляется с файлом svg, не загружен.

У меня есть работа вокруг - поместите полный svg на мой index.html, чтобы он загружался на загрузку страницы и display: none, а затем, когда пришло время использовать его, покажите это. Мне было интересно, не замечаю ли я что-либо или нет более элегантного решения.

ответ

0

Когда вы включаете html в составные компоненты, это не 100% html. Вам необходимо переписать атрибуты DOM в случае верблюда, например. stroke-opacity будет strokeOpacity.

Я бы подумал, что это вызовет проблему с анимацией.