Verwenden Sie SVG-Symbol als Marker in openlayers-3

Question

Ich habe versucht, SVG-Symbol als Marker in Openlayers-3. Hier in meinem Code.

var svg = '<?xml version="1.0"?>' 
      + '<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">' 
      + '<circle cx="60" cy="60" r="60"/>' 
      + '</svg>'; 

var style = new ol.style.Style({ 
      image: new ol.style.Icon({ 
       opacity: 1, 
       src: 'data:image/svg+xml;base64,' + btoa(svg) 
      }) 
     }); 

Aber mein Svg-Bild ist abgeschnitten, wie in der folgenden Abbildung gezeigt. ( sollte das Symbol sein ein Kreis)

Answer 1

Hier ist ein Beispiel, das Inline-SVG in einem Symbol Symbolizer zeigt: http://jsfiddle.net/eze84su3/

Hier ist der relevante Code:

var svg = '<svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg">' 
    + '<circle cx="60" cy="60" r="60"/>' 
    + '</svg>'; 

var style = new ol.style.Style({ 
    image: new ol.style.Icon({ 
    opacity: 1, 
    src: 'data:image/svg+xml;utf8,' + svg, 
    scale: 0.3 
    }) 
}); 

A Einige Unterschiede von Ihnen:

• Ich fügte width und height Attribute der <svg> hinzu. Dadurch kann der Browser wissen, wie groß das resultierende Bild ist.
• Ich habe dem Symbol eine scale-Eigenschaft hinzugefügt, um die Größe des Bildes zu ändern.
• Ich verwendete utf8 anstelle von base64 Codierung (nicht signifikant).