内联 SVG 背景图像在 React.js 中不起作用答案

【问题标题】：Inline SVG background image does not work in React.js内联 SVG 背景图像在 React.js 中不起作用
【发布时间】：2017-02-19 22:39:57
【问题描述】：

我有一个组件应该提供一个带有点网格图案的 div。

应该完成这项工作的函数如下所示：

drawSquareDotGrid(distance, unit, colour){      
        var newGrid = "data:image/svg+xml;utf8,<svg width=\""+distance+unit+"\" height=\""+distance+unit+"\"><circle cx=\"4mm\" cy=\"4mm\" r=\"0.3mm\" fill=\""+colour+ "\"/></svg>"
        this.setState({grid: newGrid })
    }

这是我的渲染函数：

  render() {
    const windowHeight = window.innerHeight - 105
    const sx = {width: "100%",
                height: windowHeight,
                backgroundImage: 'url('+ this.state.grid +')'}
    return (
        <div style={sx}></div>
    )
  }

带有 SVG 的字符串不会出现在生成的 HTML 中，但是如果我像这样使用更简单的 SVG，它会有点工作：

var newGrid = "data:image/svg+xml;utf8,<svg><circle></svg>"

知道如何解决这个问题吗？

谢谢！

罗斯塔

【问题讨论】：

尝试编码特殊字符。为此，您可以使用window.encodeURIComponent
@Kaiido 谢谢你的回答。我尝试将此函数仅用于整个字符串和特殊字符。好像没什么效果。
@Kaiido 原来你是对的毕竟 + SVG 标头中缺少 viewPort 和 xlmns。再次感谢:)
@Kaiido 如果您发表您的评论作为答案，我会接受。
您可以查看 this article 在 React 中使用 SVG（背景）。

标签： javascript css reactjs svg

【解决方案1】：

正如@Kaiido 指出的那样，URI 应该用window.encodeURIComponent 编码。 SVG 标头中也缺少 xlmns 和 viewPort 信息。

固定代码如下所示：

drawSquareDotGrid(distance, unit, colour){ 
    var prefix = "data:image/svg+xml;charset=UTF-8,"
    var grid = "<svg width=\""+distance+unit+"\" height=\""+distance+unit+"\" viewPort=\"0 0 5mm 5mm\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"4mm\" cy=\"4mm\" r=\"0.3mm\" fill=\""+colour+ "\"/></svg>"
    var newGrid = prefix + window.encodeURIComponent(grid)
    this.setState({grid: newGrid })
}

【讨论】：