Html2canvas: 'SVGElement.offsetWidth' está obsoleto y se eliminará en M50, alrededor de abril de 2016

¡Estaba a punto de plantear esto! Un poco preocupado, algo dejará de funcionar este mes.

Sí, aparentemente en la beta de Opera 37 no funciona. Además, la última versión del complemento tiene problemas para mostrar fondos y bordes. Yo tengo uno, no lo revisan?

En la demostración también, los fondos y los bordes no se muestran ((

Este es un gran problema ya que nuestros SVG ya no se procesarán.

El mayor culpable está dentro de esta función:

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 en html2canvas.js

Todos los offsetTop, offsetLeft, offsetWidth, offsetHeight ahora no están definidos para SVG

La solución recomendada es getBoundingClientRect() , pero aún así no funciona.

¿Alguien tiene una solución para esto?

@MarcBalaban No lo he probado todavía, pero ¿no sería solo agregar esto arriba del retorno en esa función?

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

@Dayjo lamentablemente no, definitivamente está en el camino correcto, pero esta línea

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

tampoco se ejecuta correctamente ya que offsetParent también se ha depreciado:

Hmm sí, mirándolo un poco más, puede que necesite usar algo como la función getBoundingBoxInArbitrarySpace aquí; https://svn.apache.org/repos/asf/commons/sandbox/gsoc/2010/scxml-js/trunk/src/javascript/scxml/cgf/util/svg.js según http://stackoverflow.com / questions / 5996005 / how-to-use-element-offsetparent-with-html-svg-elements # answers

Sin embargo, todavía no he tenido la oportunidad de hacer ningún tipo de prueba.

¿Alguna noticia sobre este tema? ¡Gracias!

@chemitaxis : a pesar de la advertencia, hasta ahora no he tenido ningún problema con el resultado de html2canvas. Sin embargo, quién sabe si y cuándo se implementará este cambio en Chrome.

Parece que esto ha dejado de funcionar Chrome. Parece que los SVG no se representan en absoluto, de forma incorrecta o en la escala incorrecta / en la posición en el lienzo.

@niklasvh - ¿

Tuve una oportunidad de esto usando https://svn.apache.org/repos/asf/commons/sandbox/gsoc/2010/scxml-js/trunk/src/javascript/scxml/cgf/util/svg.js

Pero no estaba seguro de dónde necesitaba implementarlo, probé tanto en la función offsetBounds como en la función getBounds pero fue en vano. Las coordenadas X e Y parecen ser correctas, pero el ancho y la altura son incorrectos, no estoy seguro de si esto se debe a que estoy usando css para hacer que el SVG sea el 100% del ancho del contenedor y la altura automática. Necesitaría hacer algunas pruebas más extensas.

Tengo una rama preliminar en marcha aquí (https://github.com/Dayjo/html2canvas/tree/issue-846), usando la última confirmación beta. si alguien quiere probar, debería poder usar la versión dist , o simplemente reconstruir si lo desea. No tengo idea de qué tan bien / si es que funcionará.

@Dayjo Sí, yo también me di cuenta de esto. Los SVG están totalmente en la posición incorrecta y casi siempre están fuera de la pantalla ahora que todos los desplazamientos * se evalúan como indefinidos. También intenté resolver esto usando getBoundingClientRect recursivo, pero no tuve suerte :( Echaré un vistazo a su rama.

Lo he resuelto ... agregaré la solución al final de la semana si
tener tiempo. Perdón por la demora ... Está funcionando en FF, Safari y Chrome.
Mejor.
El miércoles 29 de junio de 2016 a las 19:00, Yuki K [email protected] escribió:

@Dayjo https://github.com/Dayjo Sí, yo también me di cuenta de esto. Los SVG son
totalmente en la posición incorrecta y casi siempre están fuera de la pantalla ahora que
todos los desplazamientos * s se evalúan como indefinidos. También intenté resolver
esto usando getBoundingClientRect recursivo - pero sin suerte :( Tomaré un
mira tu rama.

-
Recibes esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/niklasvh/html2canvas/issues/846#issuecomment -229420457,
o silenciar el hilo
https://github.com/notifications/unsubscribe/ABWsecUQ2l-rxisMZ4HCKu1nh-mbIMU1ks5qQqSQgaJpZM4IDr12
.

@chemitaxis ¡Impresionante! Esperando la solución.

Hola @chemitaxis , ¿puedes crear un PR o un enlace a tu bifurcación si tienes tiempo?

@chemitaxis ¿ algún progreso en esto? Espero probar el código en un proyecto que estoy haciendo para ver si resuelve todos mis problemas de SVG, especialmente con IE.

Hola @atdiff :) He resuelto el problema usando otras bibliotecas ...