[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:

Codice:

<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:

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:

Codice:

 <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ì:

Codice:

<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/...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 · 26-08-2015, 10:57

Quote:

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 · 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 ?

Codice:

<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ì:

Codice:

<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 :

Codice:

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]

26-08-2015, 07:42	#1
das Senior Member Iscritto dal: Jan 2001 Città: Livorno Messaggi: 1388	[Javascript] Evidenziare parti di una figura SVG 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: Codice: <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: 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: Codice: <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ì: Codice: <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

26-08-2015, 10:36	#2
wingman87 Senior Member Iscritto dal: Nov 2005 Messaggi: 2793	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

26-08-2015, 17:12	#5
wingman87 Senior Member Iscritto dal: Nov 2005 Messaggi: 2793	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à.

26-08-2015, 20:17	#7
das Senior Member Iscritto dal: Jan 2001 Città: Livorno Messaggi: 1388	Errore trovato: [code] if (child[i].getAttributeNode("opacity").value==0 ) [code]

Strumenti
Mostra una versione stampabile Invia questa pagina per email