2013-10-09 21 views
6

Ho cercato di fare un mondo ciao per la manipolazione svg utilizzando JavaScript in HTML. Ho scritto il codice seguente e sebbene generi l'html corretto, non vedo alcun output nel browser, né vedo alcun errore.svg cerchio non viene disegnato con javascript

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
<script> 
var svg1 = document.createElement("svg"); 
svg1.setAttribute("height",200); 
svg1.setAttribute("width",500); 
document.body.appendChild(svg1); 
var circles = document.createElement("circle"); 
circles.setAttribute("cx",20); 
circles.setAttribute("cy",20); 
circles.setAttribute("r",20); 
svg1.appendChild(circles); 
</script> 
</body> 
</html> 

Dove sto andando male? Grazie in anticipo.

risposta

21

Gli elementi SVG devono essere creati con lo spazio dei nomi XML SVG. È possibile farlo usando createElementNS e utilizzando lo spazio http://www.w3.org/2000/svg:

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
<script> 
var svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 
svg1.setAttribute("height",200); 
svg1.setAttribute("width",500); 
document.body.appendChild(svg1); 
var circles = document.createElementNS("http://www.w3.org/2000/svg", "circle"); 
circles.setAttribute("cx",20); 
circles.setAttribute("cy",20); 
circles.setAttribute("r",20); 
svg1.appendChild(circles); 
</script> 
</body> 
</html> 
+0

Grazie zneak, funziona come un fascino ora. Posso dormire ora. –

+4

Sicuro. Non dimenticare di fare clic sul segno di spunta lasciato alla risposta se ha risolto il tuo problema. – zneak

Problemi correlati