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标头中缺少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 })
}

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

1 个答案: