Inline 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>" 

どのようにこれを修正するのですか？

ありがとうございました！

Rostaの

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 }) 
}