Html2canvas: 'SVGElement.offsetWidth'는 더 이상 사용되지 않으며 2016년 4월경 M50에서 제거됩니다.

이것을 올리려고 했던 것입니다! 이번 달에 작동이 중지될 것이 약간 우려됩니다.

예, 분명히 Opera 37 베타에서는 작동하지 않습니다. 또한 플러그인의 최신 버전에서는 배경과 테두리를 표시하는 문제가 있습니다. 나는 하나, 그들은 확인하지 않습니다?

데모에서도 배경과 테두리가 표시되지 않습니다((

SVG가 더 이상 렌더링되지 않기 때문에 이것은 큰 문제입니다.

가장 큰 원인은 이 함수에 있습니다.

function offsetBounds(node) {
    var parent = node.offsetParent ? offsetBounds(node.offsetParent) : {top: 0, left: 0};

    return {
        top: node.offsetTop + parent.top,
        bottom: node.offsetTop + node.offsetHeight + parent.top,
        right: node.offsetLeft + parent.left + node.offsetWidth,
        left: node.offsetLeft + parent.left,
        width: node.offsetWidth,
        height: node.offsetHeight
    };
}

html2canvas.js의 lines 1887 - 1898

모든 offsetTop, offsetLeft, offsetWidth, offsetHeight 는 이제 SVG에 대해 정의되지 않습니다.

권장되는 솔루션은 getBoundingClientRect() 이지만 여전히 작동하지 않습니다.

누구든지 이것에 대한 해결책이 있습니까?

@MarcBalaban 아직 시도하지 않았지만 해당 함수의 반환 위에 이것을 추가하는 것은 아닙니다.

if ( node.tagName === 'SVG' ) {
    return node.getBoundingClientRect();
  }

@Dayjo 불행히도, 그것은 확실히 올바른 길에 있지만이 라인

var parent = node.offsetParent ? offsetBounds(node.offsetParent) : {top: 0, left: 0};

offsetParent도 감가상각되었으므로 제대로 실행되지 않습니다.

흠, 조금 더 살펴보면 getBoundingBoxInArbitrarySpace 함수와 같은 것을 여기에서 사용해야 할 수도 있습니다. http://stackoverflow.com에 따라 https://svn.apache.org/repos/asf/commons/sandbox/gsoc/2010/scxml-js/trunk/src/javascript/scxml/cgf/util/svg.js /questions/5996005/how-to-use-element-offsetparent-with-html-svg-elements#answers

아직 어떤 종류의 테스트도 할 기회가 없었습니다.

이 문제에 대한 소식이 있습니까? 감사 해요!

@chemitaxis - 경고에도 불구하고 지금까지 html2canvas의 결과에 문제가 없었습니다. 그러나 이 변경 사항이 실제로 Chrome에서 구현되는지 여부는 누가 알 수 있습니까?

이제 Chrome 작동이 중지된 것 같습니다. SVG가 전혀 렌더링되지 않거나, 잘못되거나, 잘못된 배율로/캔버스의 위치에 있는 것 같습니다.

@niklasvh - 이에 대한 생각이 있습니까? 나에게 시간이 있었다면 나는 행복하게 고침에 bash를 가지고 있었을 것이다. 그러나 나는 현재로서는 choca이다.

나는 https://svn.apache.org/repos/asf/commons/sandbox/gsoc/2010/scxml-js/trunk/src/javascript/scxml/cgf/util/svg.js를 사용하여 이것을 시도했습니다.

그러나 어디에 구현해야 하는지 잘 모르겠어서 offsetBounds 및 getBounds 함수를 모두 시도했지만 아무 소용이 없었습니다. X 및 Y 좌표는 올바른 것 같지만 너비와 높이가 모두 잘못되었습니다. CSS를 사용하여 컨테이너의 너비와 자동 높이를 100%로 만들기 때문인지 확실하지 않습니다. 좀 더 광범위한 테스트를 수행해야 합니다.

최신 베타 커밋을 사용하여 여기(https://github.com/Dayjo/html2canvas/tree/issue-846)에서 진행 중인 예비 분기가 있습니다. 테스트하려는 사람이 있으면 dist 버전을 사용하거나 원하는 경우 다시 빌드할 수 있어야 합니다. 얼마나 잘 작동하는지 / 전혀 작동하지 않을지 모릅니다.

@Dayjo 네, 저도 이것을 알아차렸습니다. SVG는 완전히 잘못된 위치에 있으며 모든 오프셋*이 정의되지 않은 것으로 평가되므로 거의 항상 화면에서 벗어납니다. 또한 재귀적 getBoundingClientRect를 사용하여 이 문제를 해결하려고 시도했지만 운이 없습니다. (귀하의 지점을 살펴보겠습니다.

해결했습니다... 해결되면 이번주말에 추가하겠습니다
시간이. 늦어서 죄송합니다... FF, Safari 및 Chrome에서 작동합니다.
최상의.
2016년 6월 29일 수요일 19:00에 Yuki K [email protected]이 다음과 같이 썼습니다.

@Dayjo https://github.com/Dayjo 네, 저도 알아차렸습니다. SVG는
완전히 잘못된 위치에 있으며 거의 ​​항상 화면에서 벗어났습니다.
모든 오프셋*은 정의되지 않은 것으로 평가됩니다. 나도 해결해봤다.
이것은 재귀적 getBoundingClientRect를 사용하지만 운이 없습니다.
당신의 지점을 봐.

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/niklasvh/html2canvas/issues/846#issuecomment -229420457,
또는 스레드 음소거
https://github.com/notifications/unsubscribe/ABWsecUQ2l-rxisMZ4HCKu1nh-mbIMU1ks5qQqSQgaJpZM4IDr12
.

@chemitaxis 굉장합니다! 수정을 기대합니다.

@chemitaxis 야, 시간이 있으면 PR이나 포크 링크를 만들 수 있니?

@chemitaxis 이에 대한 진전이 있습니까? 특히 IE에서 내 SVG 문제가 모두 해결되는지 확인하기 위해 수행 중인 프로젝트에서 코드를 테스트하고 싶습니다.

안녕하세요 @atdiff :) 다른 라이브러리를 사용하여 문제를 해결했습니다...