PDA

View Full Version : [Javascript] Evidenziare parti di una figura SVG

das
26-08-2015, 07:42
Ho una figura dove al suo interno trovo dei tag <g> con un ID. Sotto <g> ci sono poi dei path con l'attributo opacity impostato a zero.

Io dovrei riuscire a modificarlo da javascript.
Alterando leggermente la figura riesco a farlo piuttosto bene:

<svg>
....
....

<g id="id1_h" opacity="0" fill="#FFFFFF"><path d="M347.886,273.685c-8.352-5.711-8.352-5.711-8.352-5.711l-9.635-10.788 .... .... ...."/>
...
...
</svg>

Subito dopo nell html uso questo codice:

<script type="text/javascript">
function Colora(elemento) {
var att = document.createAttribute("opacity"); // Create a "class" attribute
att.value = 0.4; // Set the value of the class attribute
elemento.setAttributeNode(att);

var attw = document.createAttribute("fill"); // Create a "class" attribute
attw.value = "#00FFFF"; // Set the value of the class attribute
elemento.setAttributeNode(attw);
}
</script>


E usando:

<button onclick="Colora(id1_h)">Cliccami</button>


Il path da invisibile diventa semitrasparente e quindi funge da evidenziatore di quello che c'è sotto.

Il problema mio è che le figure con cui devo avere a che fare sono così:

<svg>
....
....

<g id="id1_h" ><path opacity="0" fill="#FFFFFF" d="M347.886,273.685c-8.352-5.711-8.352-5.711-8.352-5.711l-9.635-10.788 .... .... ...."/>
...
...
</svg>


Cioè l'attributo da cambiare non è dentro <g> ma dentro tutti i <path> che trovo sotto il <g> con quell'ID.

Qualcuno mi sa dare una mano ?

Grazie
wingman87
26-08-2015, 10:36
Una volta che hai selezionato il g che ti serve puoi selezionare tutti i path al suo interno con getElementsByTagName:
https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName

oppure se sei sicuro che al di sotto ci siano solo path direttamente con children:
https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/children
das
26-08-2015, 10:57
Una volta che hai selezionato il g che ti serve puoi selezionare tutti i path al suo interno con getElementsByTagName:
https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName

oppure se sei sicuro che al di sotto ci siano solo path direttamente con children:
https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/children

Ok grazie
das
26-08-2015, 14:39
Ma come mai se l'immagine svg è copiata direttamente all'interno dell html lo script funziona mentre se è importata con object invece no ?


<html>
<head>
</head>
<body>
<object width=100% height=100% id="contentarea" type="image/svg+xml" data="Esempio.SVG"></object>

<script type="text/javascript">
function Colora(elemento) {
alert("vvvvv");
var att = document.createAttribute("opacity"); // Create a "class" attribute
att.value = 0.4;
var child = elemento.children;
var attw = document.createAttribute("fill");
attw.value = "#00FFFF";
for (i = 0; i < child.length; i++) {
child[i].setAttributeNode(att);
child[i].setAttributeNode(attw);
}
}
</script>



<button onclick="Colora(hs13_x003B_R_x0028_B1A1_x0029__x003B_T_x0028_ABAB00000000042AA_x0029_)">Cliccami</button>

</body>
</html>


In questo modo non funziona più.
wingman87
26-08-2015, 17:12
Perché quando la importi tramite object non entra a far parte del DOM, diventa parte dello stato interno dell'object, quindi da javascript non ne hai visibilità.
das
26-08-2015, 18:39
Ho risolto così:

<script type="text/javascript">
function Colora(elemento) {
var a = document.getElementById("svgObject");
var svgDoc = a.contentDocument;
var svgItem = svgDoc.getElementById(elemento);
var child = svgItem.children;
var att = document.createAttribute("opacity");
att.value = 0.4;
var attw = document.createAttribute("fill");
attw.value = "#00FFFF";
for (i = 0; i < child.length; i++) {
child[i].setAttributeNode(att);
child[i].setAttributeNode(attw);
}
}
</script>


Se volessi farlo accendere se è spento (opacity="0") o spegnere se è acceso (opacity="0.4") come dovrei fare ? In altre parole come faccio a leggere il valore dell'attributo anzichè impostarlo ?

Io ho provato a fare così ma non funziona :

function Alterna(elemento) {
var a = document.getElementById("svgObject");
var svgDoc = a.contentDocument;
var svgItem = svgDoc.getElementById(elemento);
var child = svgItem.children;
var att = document.createAttribute("opacity");
att.value = 0.4;
var attw = document.createAttribute("fill");
attw.value = "#00FFFF";
for (i = 0; i < child.length; i++) {
if (child[i].getAttributeNode("opacity")==0 ) {att.value = 0.4;}else{att.value = 0; }
child[i].setAttributeNode(att);
child[i].setAttributeNode(attw);
}
}
das
26-08-2015, 20:17
Errore trovato:
[code]
if (child[i].getAttributeNode("opacity").value==0 )
[code]