لقد أرفقت كمانًا ، وآمل أن يوضح ذلك: http://jsfiddle.net/1b4mLnfj/2/

شكرًا ، سأبحث في الأمر

لقد كنت أتفرج حول هذا لفترة من الوقت ويبدو أنه يتم حساب حدود الحاوية بشكل صحيح ولكن صورة المتجه نفسها تتبنى أبعاد منفذ العرض. يبدو أن الحدود و curvedBounds على ما يرام ، لذلك لست متأكدًا من مكان إجراء التغييرات ... هل واجه أي شخص مشكلة مثل هذه من قبل؟

بعد مزيد من التحقيق ، يبدو أن هذا يحدث فقط مع صور svg "المتجاوبة" - إذا فتحت ملف svg في Illustrator وقمت بالحفظ بدون تحديد الخيار سريع الاستجابة ، فسيتم حجمه بشكل صحيح ... بشكل أساسي إذا لم يكن svg كذلك لها ارتفاع وعرض مشفر فيه (ما يسميه Illustrator "متجاوب") ثم سيتبنى أبعاد منفذ العرض.

لذا فإن أحد الحلول المحتملة هو استبدال <img> بـ <svg> حقيقي باستخدام مكتبة مثل svg-inject (https://github.com/iconfu/svg-inject) - هنا ، إذا قمت بتطبيق ارتفاع وعرض على <img> ، فسيتم اعتماده بواسطة <svg> عند حقنه وهذا سيمنع تغيير الحجم على اللوحة القماشية.

هناك بعض العيوب لهذا (مثل عند استخدام المشفر ، base64 src ، أو إذا كان لديك svg متعددة بنفس الهيكل وتصميم الطبقة المضمنة) ولكن ربما هذا سيساعد شخصًا آخر يكافح مع هذه المشكلة. لقد كنت أعمل على هذا بشكل مطرد لبضعة أيام حتى الآن وهذا هو أفضل حل لدي حتى الآن. لا يمكنني العثور على أي شيء رمز html2canvas الفعلي الذي سيمنع تغيير حجم صورة svg على اللوحة القماشية إذا لم يكن svg يحتوي على قيم ارتفاع / عرض مشفرة.

لذلك أقوم برمي المنشفة على هذا ولكنني هبطت على الحل المرتبط بكيفية عرض / رسم svg على القماش. على وجه التحديد ، في renderNodeContent إذا استطعنا معرفة كيفية تحديد ما إذا كانت الصورة بتنسيق svg وأيضًا التي تفتقد إلى الارتفاع / العرض المشفر (متجاوب) ، فيمكننا رسم ذلك svg بأبعاد تطابق منفذ العرض ( العرض = viewport.width، height = (image.height * viewport.width) / image.width)) ثم نظريًا يمكن أن يعمل هذا. لست متأكدًا من كيفية تحديد ما إذا كانت صورة svg تفتقد قيم الطول والعرض هذه.

أي تحديث هنا؟

ليس مني ، لقد توقفت عن العمل على هذه المشكلة ولكن آمل أن تكون التعليقات الواردة أعلاه مفيدة.

مرحبا كان لدي نفس المشكلة.
احتوت علامة الصور الخاصة بي على نمط style='transition: transform 0.6s;' . بدون هذا ، يتم تقديم الصورة بشكل صحيح.