generar svg sin la etiqueta foreignObject

Estoy usando el complemento dom-to-image.js . El problema es que genera una etiqueta que contamina el canvas. Aquí está la parte que genera el svg.

 function makeSvgDataUri(node, width, height) { return Promise.resolve(node) .then(function (node) { node.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml'); return new XMLSerializer().serializeToString(node); }) .then(util.escapeXhtml) .then(function (xhtml) { return '' + xhtml + ''; }) .then(function (xhtml) { return '' + xhtml + ''; }) .then(function (svg) { return 'data:image/svg+xml;charset=utf-8,' + svg; }); } 

Si simplemente comento la sección de la etiqueta , la imagen no se muestra. ¿Cuál es la forma correcta de generar este svg sin

Este es un problema de seguridad conocido introducido en safari desde la versión 9.
Dado que dibujar un objeto extranjero implica utilizar un XMLParser, el riesgo de código malicioso es enorme en esta área. Safari probablemente sabe que les falta algo aquí y prefieren manchar el canvas.
Lo mismo se aplica para IE debajo del borde con todas las imágenes svg.

Dado que este es un problema de seguridad, no hay una solución alternativa, excepto el uso de otra biblioteca que no haga cosas maliciosas como esta. Incluso en los navegadores que lo admiten, hay tantas restricciones de seguridad aplicadas a esta técnica que no servirán de nada.

La única forma sólida de hacer que su html se dibuje en el canvas es usar métodos de canvas solelly para hacerlo.
Las bibliotecas como html2canvas u otras hacen esto y no mancharán tu canvas.