Buongiorno a tutti.
Sto sperimentando con JavaScript per manipolare degli elementi SVG in una pagina, di seguito codice e spiegazione del problema:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/svg-007.css" />
</head>
<body>
<div id="container">
</div>
</body>
<script src="./js/svg-007.js">
</script>
</html>
CSS (url: ./css/svg-007.css) :
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
background-color: rgb(250, 235, 215);
border: solid 1px black;
}
#container {
width: 90vw;
height: 90vh;
}
svg {
border: green solid;
}
JAVASCRIPT (url: ./js/svg-007.js) :
const svgNS = 'http://www.w3.org/2000/svg';
const diagramCode = '<rect x="20" y="20" width="70" height="70" fill="green"></rect>';
const container = document.querySelector('#container');
const diagramElement = document.createElement('g');
diagramElement.innerHTML = diagramCode;
const svgContainerElm = document.createElementNS(svgNS, 'svg');
svgContainerElm.setAttribute('width', '100%');
svgContainerElm.setAttribute('height', '100%');
let rectangle = document.createElementNS(svgNS, 'rect');
rectangle.setAttribute('x', 20);
rectangle.setAttribute('y', 20);
rectangle.setAttribute('width', 50);
rectangle.setAttribute('height', 50);
rectangle.setAttribute('fill', 'red');
svgContainerElm.append(rectangle);
svgContainerElm.append(diagramElement);
container.append(svgContainerElm);
Sto lavorando su Ubuntu 22.04 e sto testando la pagina sia su Chromium ver.>116.0 che Firefox ver.>116.0. Scritto con VSCode anche se non dovrebbe avere importanza, credo.
Al di la del codice che di per se non ha alcun senso pratico trattandosi per ora di un esperimento, succede è che il rettangolo verde creato con la costante "diagramCode" che a sua volta viene inserito con qualche passaggio nell'elemento <svg> non viene visualizzato nella pagina a differenza invece dell'elemento “rectangle” rosso creato con document.createElementNS.
Ispezionando il codice con i developer tools la pagina sembra ben formata.
La cosa che trovo strana è che editando il codice HTML/SVG dai developer tool, se semplicemente faccio CUT dell'elemento corrispondente a “diagramCode” e poi faccio PASTE dello stesso elemento nella stessa identica posizione il rettangolo verde compare nella pagina.
Il codice della pagina appare assolutamente identico prima e dopo.
Una cosa che ho notato è che nel riquadro degli stili la seguente regola:
rect[Stile degli attributi] {
x: 20;
y: 20;
width: 70;
height: 70;
fill: green;
}
compare quando seleziono il rettangolo verde solo dopo averlo tagliato e reincollato manualmente nel codice, mentre prima era del tutto assente. Invece per il rettangolo rosso la regola analoga (con valori diversi ovviamente) è presente fin da subito.
So che potrei generare entrambi gli elementi <rect> allo stesso modo del rosso, ma vorrei veramente capire dove sto sbagliando, visto che apparentemente lo stesso codice HTML funziona o non funziona a seconda dei casi e senza un motivo apparente. Penso sia legato alla regola “fantasma” ma in che modo non lo so.
Grato a chi avrà la pazienza di leggere e illuminarmi….!