私はフィドルを添付しましたが、これが明確になることを願っています： http ：

ありがとう、私はそれを調べます

私はしばらくこれを突っ込んでいて、コンテナの境界が正しく計算されているように見えますが、ベクター画像自体はビューポートの寸法を採用しています。 境界とcurvedBoundsは大丈夫のようですので、どこで変更を加えるのかわかりません...以前にこのような問題に遭遇した人はいますか？

さらに調査したところ、これは「レスポンシブ」なsvg画像でのみ発生しているようです。Illustratorでsvgを開き、レスポンシブオプションをオンにせずに保存すると、サイズが正しくなります...基本的にsvgがそうでない場合高さと幅がエンコードされている場合（Illustratorが「レスポンシブ」と呼んでいるもの）、ビューポートの寸法を採用します。

したがって、考えられる解決策の1つは、 svg-inject （https://github.com/iconfu/svg-inject）などのライブラリを使用して<img>を真の<svg>に置き換えることです-ここで、高さと幅を<img>に適用すると、注入時に<svg>に採用されるため、キャンバスでのサイズ変更ができなくなります。

これにはいくつかの欠点があります（エンコードされたbase64 srcを使用する場合、または同じ構造とインラインクラススタイルを持つ複数のsvgがある場合など）が、これは他の誰かが問題に苦しんでいるのに役立つ可能性があります。 私はこれに数日間着実に取り組んできました、そしてこれは私がこれまでに持っている最良の解決策です。 svgにエンコードされた高さ/幅の値がない場合にキャンバス上のsvg画像のサイズ変更を妨げる実際のhtml2canvasコードは何も見つかりません。

だから私はこれにタオルを投げ込んでいますが、svgがキャンバス上でどのようにレンダリング/描画されるかに関連する解決策にたどり着きました。 具体的には、 renderNodeContent 、画像がsvgであり、エンコードされた高さ/幅が欠落している（レスポンシブ）かどうかを判断する方法がわかれば、ビューポートに一致する寸法でそのsvgを描画できます（ width = viewport.width、height =（image.height * viewport.width）/ image.width））理論的には、これでうまくいく可能性があります。 svg画像にこれらの高さと幅の値がないかどうかを判断する方法がわかりません。

ここに更新はありますか？

私からではありませんが、この問題への取り組みをやめましたが、上記のコメントがお役に立てば幸いです。

こんにちは私は同じ問題を抱えていました。
私の画像タグにはstyle='transition: transform 0.6s;'スタイルが含まれていました。 これがないと、画像は正しくレンダリングされます。