2016-05-23 17 views
0

イメージをロードして遊んでいたところ、SvgCircusが見つかりました。アニメーション化されたSVGを開発できます。 Here's私が作成した例です。リアクションコンポーネントにアニメーションSVGを埋め込む

私はこのsvgをindex.htmlに入れても問題ありません。しかし、私がReactコンポーネントでそれを使用しようとすると、スタティックイメージだけをロードすることができます - アニメーションはありません。私は生の文字列をロードするためにスパンのdangerouslySetInnerHTMLパラメータと<use xlinkHref={filename}></use>を使用してこれを試みましたが、これらの両方が静止画像をロードします。私はReactには初めてですが、svgファイルに付属のjavascriptがロードされていないことを推測します。

私はindex.htmlに完全なsvgを入れて、ページロードとdisplay: noneにロードするようにしてから、それを表示するときに使います。私は何かが見落とされているのか、より洗練された解決策があるのか​​疑問に思いました。

答えて

0

反応成分にhtmlを含めると、100%htmlではありません。あなたはcamelの場合にDOM属性を書き換える必要があります。 stroke-opacitystrokeOpacityとなります。

これはアニメーションの問題を引き起こすと思います。

関連する問題