2013-10-09 2 views
6

Я пытаюсь сделать мир hello для svg-манипуляции, используя javascript в HTML. Я написал код ниже, и хотя он генерирует правильный html, я не вижу никакого вывода в браузере и не вижу никакой ошибки.svg круг не рисуется с помощью 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> 

Где я иду не так? заранее спасибо.

ответ

21

Элементы SVG должны быть созданы с использованием пространства имен SVG XML. Вы можете сделать это с помощью createElementNS и используя 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

Благодаря zneak, работает как шарм в настоящее время. Теперь я могу спать. –

+4

Несомненно. Не забудьте нажать галочку слева от ответа, если она решит вашу проблему. – zneak

Смежные вопросы