Inline-SVG-Hintergrundbild funktioniert nicht in React.js

Question

Ich habe eine Komponente, die ein div mit einem Punktgittermuster bereitstellen sollte.

Die Funktion, die die Arbeit machen sollte wie folgt aussieht:

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

und dies ist meine Render-Funktion:

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

Die Zeichenfolge mit SVG in generierten HTML nicht erscheint aber es etwas Werke wenn ich einfachere SVG wie folgt verwende:

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

Irgendeine Idee, wie man das repariert?

Vielen Dank!

Rosta

Answer 1

Wie @Kaiido URI wies darauf hin, sollte mit window.encodeURIComponent codiert werden. Außerdem fehlten xlmns und viewPort-Informationen im SVG-Header.

Fest Code sieht wie folgt aus:

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