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

Question

我有一个组件，应该提供一个带有点网格图案的 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>"

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

谢谢!

罗斯塔

Answer 1

正如 @Kaiido 指出的那样，URI 应该使用 window.encodeURIComponent 进行编码。 SVG header 中还缺少 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 })
}