Ich habe eine Fiddle angehängt, die das hoffentlich klar macht: http://jsfiddle.net/1b4mLnfj/2/

Danke, ich schaue mir das an

Ich habe eine Weile herumgestöbert und es scheint, als würden die Containergrenzen korrekt berechnet, aber das Vektorbild selbst übernimmt die Abmessungen des Ansichtsfensters. Es scheint, als ob die Grenzen und die CurvedBounds in Ordnung sind, daher bin ich mir nicht sicher, wo ich Änderungen vornehmen soll... Ist jemand schon einmal auf ein solches Problem gestoßen?

Nach weiteren Untersuchungen sieht es so aus, als ob dies nur bei SVG-Bildern passiert, die "responsive" sind. Wenn Sie die SVG-Datei in Illustrator öffnen und speichern, ohne dass die Reaktionsoption aktiviert ist, wird die Größe korrekt angezeigt ... im Wesentlichen, wenn die SVG-Datei dies nicht tut eine Höhe und Breite darin kodiert haben (was Illustrator als "responsive" bezeichnet), dann übernimmt es die Abmessungen des Ansichtsfensters.

Eine mögliche Lösung besteht also darin, <img> durch ein echtes <svg> zu ersetzen, indem eine Bibliothek wie svg-inject (https://github.com/iconfu/svg-inject) verwendet wird -- Wenn Sie hier eine Höhe und Breite auf <img> anwenden, wird diese beim Einfügen von <svg> und die Größenänderung auf der Leinwand verhindert.

Dies hat einige Nachteile (z. B. bei der Verwendung codierter base64-Srcs oder wenn Sie mehrere SVGs mit derselben Struktur und Inline-Klassenstil haben), aber vielleicht hilft dies jemand anderem, der mit dem Problem zu kämpfen hat. Ich arbeite jetzt seit ein paar Tagen stetig daran und das ist die beste Lösung, die ich bisher habe. Ich kann nichts im eigentlichen html2canvas Code finden, der die Größenänderung eines SVG-Bildes auf der Leinwand verhindert, wenn das SVG keine codierten Höhen- / Breitenwerte hat.

Also werfe ich das Handtuch auf dieses, aber ich bin auf die Lösung gelandet, die damit zusammenhängt, wie das SVG gerendert / auf der Leinwand gezeichnet wird. Insbesondere in renderNodeContent wenn wir herausfinden können, ob ein Bild ein SVG ist und auch eines, dem die kodierte Höhe / Breite fehlt (responsive), dann könnten wir dieses SVG mit Abmessungen zeichnen, die dem Ansichtsfenster entsprechen ( width = viewport.width, height = (image.height * viewport.width) / image.width)) dann könnte das theoretisch funktionieren. Ich bin mir nur nicht sicher, wie ich feststellen kann, ob dem SVG-Bild diese Höhen- und Breitenwerte fehlen.

gibt es hier ein Update?

Nicht von mir, ich habe aufgehört, an dem Problem zu arbeiten, aber hoffentlich könnten die obigen Kommentare hilfreich sein.

Hallo, ich hatte das gleiche Problem.
Mein Image-Tag enthielt einen style='transition: transform 0.6s;' Stil. Ohne dies wird das Bild korrekt gerendert.