Canvas drawImage zeichnet nur einen Teil von SVG

Question

Ich habe Diagramm SVG der Breite um 500 und der Höhe um 300. Ich habe es skalieren Attribut in SVG skaliert. Jetzt, als ich versuchte, es auf Leinwand zu zeichnen, zeichnet es auf einen Teil von der oberen linken Ecke des SVG. Wenn ich die SVG-Datei im Browser separat öffne, wird das ganze Bild angezeigt. Auch das Bild-Tag, das ich für die Leinwand erstellt habe, zeigt auch das ganze Bild an.

Ich habe auch versucht, verschiedene Quell-und Ziel-Offsets, Breite und Höhe, aber es hat nicht funktioniert.

Ich bin jetzt ahnungslos, was könnte das Problem sein.

Folgendes ist der Beispielcode, wo ich das SVG geändert habe.

HINWEIS: - Dies schneidet auch Bild, zeigt aber volle SVG, wenn ich Quelle und Ziel Offsets, Breite und Höhe bereitstellen. Leider hilft es mir nicht mit meinem SVG.

var data = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><rect width="1000" height="350" fill="rgb(0, 255, 0)" stroke-width="1" stroke="rgb(0, 0, 0)" /></svg>'; 

var canvas = $("<canvas width='1024' height='360' style=\"border: 1px solid red;\">"); 
$(canvas).appendTo('body').css('position', 'absolute').css('top', 0); 
var image = new Image; 
$(image).appendTo("body") 
    .width(defaultZoomWidth).height(360) 
    .css("position", "fixed").css("top", "400px"); 
image.onload = function() { 
    setTimeout(function(){ 
     var context = canvas.get(0).getContext("2d"); 
     context.drawImage(image, 0, 0); 
    }, 1000); 
}; 
image.src = data; 

Answer 1

Ihr Problem ist, dass Sie Muss Satz absolute width und height Attribute auf dem <svg> Knoten, nicht Prozentsätze, die Standardeinstellung sein wird, wenn nichts eingestellt ist (100%).

Als Seitennotizen ist die am meisten unterstützte Syntax der DatenURI-Kopfzeile
data:image/svg+xml; charset=utf8, + your_svg_markup.

Auch ist es immer besser, encodeURIComponent Ihre serialisierte Svg-Markup, wenn Sie es als DataURI setzen.

hier So ist es:

var svgString = '<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg" version="1.1"><rect width="1000" height="350" fill="rgb(0, 255, 0)" stroke-width="1" stroke="rgb(0, 0, 0)" /></svg>'; 
 

 
var data = 'data:image/svg+xml; charset=utf8, '+ encodeURIComponent(svgString); 
 

 
var canvas = $("<canvas width='1024' height='360' style=\"border: 1px solid red;\">"); 
 
$(canvas).appendTo('body').css('position', 'absolute').css('top', 0); 
 
var image = new Image; 
 
image.onload = function() { 
 
    var context = canvas.get(0).getContext("2d"); 
 
    context.drawImage(image, 0, 0); 
 
}; 
 
image.src = data;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>