在由React呈现之前以编程方式将样式添加到svg中?

时间:2016-06-18 21:41:19

标签: javascript css svg reactjs

我能够将我的svg渲染为

 render () {
     return (
        <object type="image/svg+xml" data="./src/img/test.svg" ref="svg">
        </object>
     )
 }

我希望用户能够通过选择颜色来更改填充,颜色作为道具传递。在渲染中返回之前,如何更改svg的样式?

我还调查过在componentDidUpdate()中更改它,但我认为它反对一般的React设计模式来操纵DOM。

1 个答案:

答案 0 :(得分:0)

使用以下过程:

  • 将SVG转换为data URI
  • 通过替换数据URI
  • 更新填充颜色
  • 状态更改完成后渲染

<强>参考