나는 이것을 분명히하기를 희망하는 Fiddle을 첨부했다 : http://jsfiddle.net/1b4mLnfj/2/

감사합니다. 조사하겠습니다.

이 문제를 한동안 살펴 봤는데 컨테이너 경계가 올바르게 계산되는 것 같지만 벡터 이미지 자체가 뷰포트의 크기를 채택하고 있습니다. 경계와 곡선 경계가 괜찮은 것 같아서 어디에서 변경해야할지 모르겠습니다. 누구든지 전에 이와 같은 문제가 발생합니까?

자세히 조사한 결과, 이것은 "반응 형"인 svg 이미지에서만 발생하는 것 같습니다. Illustrator에서 svg를 열고 반응 형 옵션을 선택하지 않고 저장하면 크기가 올바르게 조정됩니다. 기본적으로 svg가 그렇지 않은 경우 여기에 높이와 너비가 인코딩 된 경우 (Illustrator에서 "반응 형"이라고 함) 뷰포트의 크기를 채택합니다.

따라서 한 가지 잠재적 인 해결책은 svg-inject (https://github.com/iconfu/svg-inject)와 같은 라이브러리를 사용하여 <img> 을 실제 <svg> 로 바꾸는 것입니다. 여기에서 <img> 높이와 너비를 적용하면 삽입 될 때 <svg> 채택되어 캔버스에서 크기 조정을 방지합니다.

여기에는 몇 가지 단점이 있습니다 (예 : 인코딩 된 base64 src를 사용하거나 동일한 구조 및 인라인 클래스 스타일을 가진 여러 svg가있는 경우). 나는 이것을 며칠 동안 꾸준히 작업 해 왔으며 이것이 지금까지 내가 가진 최고의 솔루션입니다. SVG에 인코딩 된 높이 / 너비 값이없는 경우 캔버스에서 svg 이미지의 크기를 조정하지 못하게하는 실제 html2canvas 코드를 찾을 수 없습니다.

그래서 나는 이것에 수건을 던지고 있지만 SVG가 캔버스에 렌더링 / 그려지는 방법과 관련된 솔루션에 도달했습니다. 특히 renderNodeContent 에서 이미지가 svg이고 인코딩 된 높이 / 너비 (반응 형)가 누락 된 이미지인지 확인하는 방법을 알아낼 수 있다면 뷰포트 ( width = viewport.width, height = (image.height * viewport.width) / image.width)) 이론적으로 이것은 작동 할 수 있습니다. svg 이미지에 해당 높이 및 너비 값이 없는지 확인하는 방법을 잘 모르겠습니다.

여기에 업데이트가 있습니까?

나는 문제에 대한 작업을 중단했지만 위의 의견이 도움이 될 수 있기를 바랍니다.

안녕 나는 같은 문제가 있었다.
내 이미지 태그에 style='transition: transform 0.6s;' 스타일이 있습니다. 이것이 없으면 이미지가 올바르게 렌더링됩니다.