динамический элемент svg, добавленный Javascript, не работает

Я действительно смущен здесь. У меня есть статический элемент SVG, который отображается отлично, но когда я добавляю идентичный элемент из Javascript, он не отображается. Почему это??динамический элемент svg, добавленный Javascript, не работает

<html> 
 
    <head> 
 
\t <script type="text/javascript"> 
 
\t  function doit() 
 
\t \t { 
 
\t \t \t var svgdiv = document.getElementById('svg1'); 
 
\t \t \t for (var k = 1; k < 3; ++k) 
 
\t \t \t { 
 
\t \t \t \t var svg = document.createElement('svg'); 
 
\t \t \t \t svg.setAttribute('width',100); 
 
\t \t \t \t svg.setAttribute('height',100); 
 
\t \t \t \t console.log(svg); 
 
\t \t \t \t var c = document.createElement('circle'); 
 
\t \t \t \t c.setAttribute('cx',50); 
 
\t \t \t \t c.setAttribute('cy',50); 
 
\t \t \t \t c.setAttribute('r',40); 
 
\t \t \t \t c.setAttribute('stroke','green'); 
 
\t \t \t \t c.setAttribute('stroke-width',4); 
 
\t \t \t \t c.setAttribute('fill','yellow'); 
 
\t \t \t \t svg.appendChild(c); 
 
\t \t \t \t svgdiv.appendChild(svg); 
 
\t \t \t } 
 
\t \t } 
 
\t \t window.onload = doit; 
 
\t </script> 
 
    </head> 
 
    <body> 
 
\t <svg width="100" height="100"> 
 
\t <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
 
\t </svg> 
 
     <div id="svg1"></div> 
 
    </body> 
 
</html>

источник

2014-12-15 Jason S

Использование

document.createElementNS('http://www.w3.org/2000/svg', 'svg')

вместо

document.createElement('svg')

Объяснение:

Элементы SVG должны быть созданы в пространстве имен SVG и поэтому не должны создаваться createElement, вместо этого вы должны использовать createElementNS, предоставляя пространство имен SVG в качестве первого аргумента.

createElement в основном создает элементы html, называемые svg и circle, а не элементы SVG.

text/html не имеет пространств имен, поэтому парсер HTML волшебным образом переключается на пространство имен SVG, когда он встречает элемент <svg>. Если вы изменили тип mime на некоторое пространство имен XML, например. http://www.w3.org/1999/xhtml/, тогда вам понадобится атрибут xmlns на корневой элемент <html>, а также на элементе <svg>.

<html> 
 
    <head> 
 
\t <script type="text/javascript"> 
 
\t  function doit() 
 
\t \t { 
 
\t \t \t var svgdiv = document.getElementById('svg1'); 
 
\t \t \t for (var k = 1; k < 3; ++k) 
 
\t \t \t { 
 
\t \t \t \t var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 
 
\t \t \t \t svg.setAttribute('width',100); 
 
\t \t \t \t svg.setAttribute('height',100); 
 
\t \t \t \t console.log(svg); 
 
\t \t \t \t var c = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); 
 
\t \t \t \t c.setAttribute('cx',50); 
 
\t \t \t \t c.setAttribute('cy',50); 
 
\t \t \t \t c.setAttribute('r',40); 
 
\t \t \t \t c.setAttribute('stroke','green'); 
 
\t \t \t \t c.setAttribute('stroke-width',4); 
 
\t \t \t \t c.setAttribute('fill','yellow'); 
 
\t \t \t \t svg.appendChild(c); 
 
\t \t \t \t svgdiv.appendChild(svg); 
 
\t \t \t } 
 
\t \t } 
 
\t \t window.onload = doit; 
 
\t </script> 
 
    </head> 
 
    <body> 
 
\t <svg width="100" height="100"> 
 
\t <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
 
\t </svg> 
 
     <div id="svg1"></div> 
 
    </body> 
 
</html>

источник

2014-12-15 17:05:21

Weird. Почему тогда появляется первый круг? У меня нет ссылки на пространство имен SVG. –

Первый круг появляется, потому что браузер знает, какое пространство имен следует использовать, когда он находит элемент '' внутри элемента '

динамический элемент svg, добавленный Javascript, не работает

ответ

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