Html2canvas: 'SVGElement.offsetWidth' está obsoleto e será removido no M50, por volta de abril de 2016

Estava prestes a levantar isso! Um pouco preocupado com algo pare de funcionar este mês.

Sim, aparentemente no Opera 37 beta não funciona. Além disso, a versão mais recente dos problemas de plug-in para exibir planos de fundo e bordas. Eu tenho um, eles não conferem?

Também na demonstração, planos de fundo e bordas não aparecem ((

Este é um grande problema, pois nossos SVGs não serão mais renderizados.

O maior culpado está dentro desta função:

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
    };
}

lines 1887 - 1898 em html2canvas.js

Todos os offsetTop, offsetLeft, offsetWidth, offsetHeight agora são indefinidos para SVGs

A solução recomendada é getBoundingClientRect() , mas ainda não consigo fazê-la funcionar.

Alguém tem uma solução para isso?

@MarcBalaban Eu não tentei ainda, mas não seria apenas adicionar isso acima do return nessa função;

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

@Dayjo infelizmente não, está definitivamente no caminho certo, mas esta linha

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

também não é executado corretamente, pois o offsetParent também foi depreciado:

Hmm, sim, olhando um pouco mais a fundo, pode ser necessário usar algo como a função getBoundingBoxInArbitrarySpace aqui; https://svn.apache.org/repos/asf/commons/sandbox/gsoc/2010/scxml-js/trunk/src/javascript/scxml/cgf/util/svg.js conforme http://stackoverflow.com / questions / 5996005 / how-to-use-element-offsetparent-with-html-svg-elements # answers

Não tive a chance de fazer nenhum tipo de teste ainda.

Alguma notícia sobre este assunto? Obrigado!

@chemitaxis - apesar do aviso, até agora não tive problemas com o resultado do html2canvas. No entanto, quem sabe se / quando essa mudança será realmente implementada no Chrome

Parece que agora o Chrome parou de funcionar. Os SVGs parecem não ter sido renderizados de forma alguma, incorretamente ou na escala / posição errada na tela.

@niklasvh - alguma opinião sobre isso? Se eu tivesse tempo, ficaria feliz em tentar consertar, mas estou choca no momento.

Tive uma chance usando https://svn.apache.org/repos/asf/commons/sandbox/gsoc/2010/scxml-js/trunk/src/javascript/scxml/cgf/util/svg.js

Mas não tinha certeza de onde precisava implementá-lo, tentei as funções offsetBounds e getBounds , mas sem sucesso. As coordenadas X e Y parecem estar corretas, mas a largura e a altura estão todas erradas, não tenho certeza se é porque estou usando css para tornar o SVG 100% da largura do contêiner e da altura automática. Precisaria fazer alguns testes mais extensos.

Eu tenho um branch preliminar acontecendo aqui (https://github.com/Dayjo/html2canvas/tree/issue-846), usando o commit beta mais recente. se alguém quiser testar, deve poder usar a versão dist , ou apenas reconstruir, se desejar. Não tenho ideia de quão bem / se vai funcionar.

@Dayjo Sim, também percebi isso. Os SVGs estão totalmente na posição errada e quase sempre fora da tela agora que todos os offset * s são avaliados como indefinidos. Eu também tentei resolver isso usando getBoundingClientRect recursivo - mas sem sorte :( Vou dar uma olhada em seu branch.

Já resolvi ... Vou adicionar a solução no final da semana se eu
tenho tempo. Desculpe pela demora ... Está funcionando no FF, Safari e Chrome.
Melhor.
Na quarta-feira, 29 de junho de 2016 às 19:00, Yuki K [email protected] escreveu:

@Dayjo https://github.com/Dayjo Sim, também percebi isso. SVGs são
totalmente na posição errada e quase sempre fora da tela agora que
todos os offset * s são avaliados como indefinidos. Eu também tentei resolver
isso usando getBoundingClientRect recursivo - mas sem sorte :( Vou pegar um
olhe para o seu ramo.

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/niklasvh/html2canvas/issues/846#issuecomment -229420457,
ou silenciar o tópico
https://github.com/notifications/unsubscribe/ABWsecUQ2l-rxisMZ4HCKu1nh-mbIMU1ks5qQqSQgaJpZM4IDr12
.

@chemitaxis Awesome! Ansioso pela correção.

Ei @chemitaxis , você pode criar um PR ou link para o seu fork se tiver tempo?

@chemitaxis algum progresso nisso? Espero testar o código em um projeto que estou realizando para ver se ele resolve todos os meus problemas de SVG, especialmente com o IE.

Olá @atdiff :)