Я прикрепил скрипт, который, надеюсь, проясняет это: 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 с размерами, соответствующими области просмотра ( width = viewport.width, height = (image.height * viewport.width) / image.width)), то теоретически это может сработать. Я просто не уверен, как определить, отсутствуют ли в изображении svg эти значения высоты и ширины.

какие-нибудь обновления здесь?

Не от меня, я перестал работать над этой проблемой, но, надеюсь, приведенные выше комментарии могут быть полезны.

Привет, у меня была такая же проблема.
Мой тег изображения содержит стиль style='transition: transform 0.6s;' . Без этого изображение отображается правильно.