Ignores CSS when exporting, and does not export to SVG

[FedericoBoccaccioLavorativo]

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/niklasvh/html2canvas
script src: https://html2canvas.hertzen.com/dist/html2canvas.min.js

First problem: it doesn't support exporting to SVG!

I'll try exporting to PNG with

// Funzione per l'esportazione in PNG
function EsportaPng(scala = 1)
{
	const node = document.querySelector('.containerSql');
	const scale = scala;
	const options =
	{
		scale: scale,
		useCORS: true // Permette di gestire immagini esterne, anche se sconsigliato
	};

	html2canvas(node, options).then(canvas =>
	{
		const dataUrl = canvas.toDataURL('image/png');
		const link = document.createElement('a');
		link.download = `container-sql@${scale}X.png`;
		link.href = dataUrl;
		link.click();
		console.log(`Immagine PNG a ${scale}X generata.`);
	})
	.catch(function (error)
	{
		console.error('Si è verificato un errore durante la generazione della PNG.', error);
	});
}

I think this version generated something. I tried 4 and I can't be more precise. But it ignored some CSS.

A later version was

/**
 * 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 =
	{
		scale: scala,
		useCORS: true // Per gestire correttamente le risorse esterne
	};

	html2canvas(node, options).then(canvas =>
	{
		const dataUrl = canvas.toDataURL('image/png');
		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(error =>
	{
		console.error('Si è verificato un errore durante la generazione della PNG.', error);
		alert('Errore durante la creazione del PNG. Controlla la console per i dettagli.');
	});
}

It has always ignored some CSS.