Necesito poder exportar todo dentro de un Div a un archivo SVG exportable. Estoy usando la biblioteca html-to-image para hacer esto. El problema que tengo es que la ruta SVG generada no es correcta y no funciona como un archivo SVG. Intenté algunas cosas, pero estoy atascado. A continuación se muestra el código completo que puede ejecutar para probarlo.
<!DOCTYPE html> <html lang="en" dir="ltr"> <body> <!-- 1. Constructing a Div --> <div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div> <!-- 2. Using HTML-to-Image to convert that Div to SVG --> <script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.9.0/html-to-image.js"></script> <script type="text/javascript"> function filter (node) { return (node.tagName !== 'i'); } htmlToImage.toSvg(document.getElementById('capture'), { filter: filter }) .then(function (dataUrl) { //--3. the following Alert shows the generated SVG file for reference, but the SVG path generated is wrong alert(dataUrl); }); </script> </body> </html>La URL de datos devuelta de html a imagen está codificada como URL. Por lo tanto, debe decodificar y también debe omitir la primera cadena de tipo mimie, que es la parte anterior a la coma , . En este ejemplo, dividí la cadena , datos con y decodifiqué la cadena svg.
<div id="svg"> </div> htmlToImage.toSvg(document.getElementById('capture'), { filter: filter }) .then(function (dataUrl) { let svg = decodeURIComponent(dataUrl.split(',')[1]) console.log(svg); document.getElementById('svg').innerHTML = svg });