?
Vielleicht ein wenig konkreter...
Warum funktioniert dieser Code nicht?
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttributeNS(null, 'x', 0);
rect.setAttributeNS(null, 'y', 0);
rect.setAttributeNS(null, 'height', 500);
rect.setAttributeNS(null, 'width', 500);
rect.setAttributeNS(null, 'fill', "white");
svg.appendChild(rect);
var s = 'data:image/svg+xml;base64,' + window.btoa(new XMLSerializer().serializeToString(document.getElementById("svg")));
var imageLayer = new ol.layer.Image({
source: new ol.source.ImageStatic({
url: s,
imageSize: [550, 700],
projection: map.getView().getProjection(),
imageExtent: ol.extent.applyTransform([8.4371433, 46.449992, 9.4371433, 47.449992], ol.proj.getTransform("EPSG:4326", "EPSG:3857"))
})
});
map.addLayer(imageLayer);
Warum wird die SVG nicht auf der Karte angezeigt? Gebe ich in der url einen Link zu einem Bild hin funktioniert es. Im Internet habe ich gefunden, dass man eine inline SVG so zu einer URL machen kann.
https://stackoverflow.com/questions/28450471/convert-inline-svg-to-base64-string
Die Größe der Grafik bei ImageSize stimmt ebenfalls.
