I was unable to export #555
Description
I cannot share the complete code for the project.
In the area to be exported, and there is no alternative to this, I have
<svg id="arrowSvgContainer" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
<defs>
<marker id="puntaFreccia" viewBox="0 0 10 10" refX="10" refY="5" markerUnits="strokeWidth" markerWidth="10" markerHeight="7" orient="auto">
<polygon points="0 0, 10 5, 0 10"></polygon>
</marker>
<marker id="puntaFrecciaHover" viewBox="0 0 10 10" refX="10" refY="5" markerUnits="strokeWidth" markerWidth="7" markerHeight="5" orient="auto">
<polygon points="0 0, 10 5, 0 10"></polygon>
</marker>
</defs>
</svg>
which is modified via js by adding elements such as
<path d="M 338,599 L 333,599 Q 328,599 324,595..." class="freccia" marker-end="url(#puntaFreccia)" id="..."></path>
And I use CSS like
div.rombo
{
height: var(--dimRombo);
width: var(--dimRombo);
rotate: 45deg;
flex-shrink: 0;
margin-right: 3px;
margin-top: 1px;
}
div.vuoto
{
border: 2px solid var(--coloreRombo);
background-color: transparent;
}
.commento-fluttuante
{
position: absolute; /* Rende il rettangolo fluttuante e posizionabile */
left: var(--x, 0px); /* Usa --x per la posizione orizzontale, default 0px */
top: var(--y, 0px); /* Usa --y per la posizione verticale, default 0px */
width: var(--w, 300px);
height: var(--h, 150px);
background-color: #fcf8e3; /* Sfondo chiaro per il rettangolo */
padding: 15px 10px 10px 10px; /* Spazio per il titolo in alto, e padding generico */
box-sizing: border-box; /* Include padding e border nella larghezza/altezza */
display: flex; /* Per centrare o organizzare il contenuto interno */
flex-direction: column; /* Essenziale per gestire l'allineamento verticale con justify-content */
color: var(--col-testo,#4CAF50);
font-size: var(--dimFontStd);
}
.bordo-ombreggiato
{
box-shadow: 2px 2px 5px rgba(0,0,0,0.2); /* Una leggera ombra per l'effetto fluttuante */
}
.bordo-tratteggiato
{
border: 2px dashed var(--coloreBordo, #8B4513); /* Bordo tratteggiato */
}
Which is ignored, at least the rotation part. I apply this CSS to empty divs, with the sole purpose of displaying squares rotated by 45°. Which I have incorrectly called a rhombus.
And here and there are also pseudo-elements that seem to be interpreted correctly. And animations/transitions that are ignored.
Animations are not essential, although they are welcome in SVG, but I would at least like the static graphics to be identical.
My goal is to export the page content to PNG and SVG.
Git: https://github.com/bubkoo/html-to-image
script src: https://unpkg.com/html-to-image@1.11.0/dist/html-to-image.js
I try to export with
/**
* Esporta un'immagine PNG dell'elemento con classe 'containerSql'.
*
* @param {number} scala - Il fattore di scala per la risoluzione (ad es. 2 per 2x).
*/
function EsportaPng(scala = 1)
{
const node = document.querySelector('.containerSql');
const options =
{
quality: 0.95,
// La scala per l'esportazione in PNG
pixelRatio: scala,
};
htmlToImage.toPng(node, options).then(function (dataUrl)
{
const link = document.createElement('a');
link.download = `container-sql@${scala}X.png`;
link.href = dataUrl;
link.click();
console.log(`Immagine PNG a ${scala}X generata.`);
})
.catch(function (error)
{
console.error('Si è verificato un errore durante la generazione della PNG.', error);
alert(`Errore nella creazione del PNG a ${scala}X. Controlla la console per i dettagli.`);
});
}
/**
* Esporta l'elemento con classe 'containerSql' in un file SVG.
*/
function EsportaSVG()
{
const node = document.querySelector('.containerSql');
// La libreria html-to-image è in grado di gestire correttamente
// i riferimenti e i CSS, superando i limiti di dom-to-image.
htmlToImage.toSvg(node).then(function (dataUrl)
{
const link = document.createElement('a');
link.download = 'container-sql.svg';
link.href = dataUrl;
link.click();
console.log('Immagine SVG generata.');
})
.catch(function (error)
{
console.error('Si è verificato un errore durante la generazione dell\'SVG.', error);
alert('Errore nella creazione del SVG. Controlla la console per i dettagli.');
});
}
But I got "Si è verificato un errore durante la generazione della PNG."
error { target: img, isTrusted: true, srcElement: img, currentTarget: img, eventPhase: 2, bubbles: false, cancelable: false, returnValue: true, defaultPrevented: false, composed: false, … }
funzioni.js:964:21
EsportaPng .../funzioni.js:964
(Asinc.: promise callback)
EsportaPng .../funzioni.js:963
onclick .../file.html:1
While for SVG, the generated file contains
Errore interpretazione XML: non well-formed
Indirizzo: file:///.../export.svg
Riga numero 21, colonna 51:
<div class="..." style="--x: 25px; --y:40px; --direzione:column; gap:60px; padding-top: 15px;">
----------------------------------------^
On some occasions, it also exported something, but never everything.