[Javascript] Evidenziare parti di una figura SVG

[das]

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]

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/...mentsByTagName

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

[das]

Originariamente inviato da wingman87

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/...mentsByTagName

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

Ok grazie

[das]

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]

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]

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]

Errore trovato:
[code]
if (child[i].getAttributeNode("opacity").value==0 )
[code]