dynamiczny element svg dodany przez JavaScript nie działa

Jestem bardzo zdezorientowany. Mam statyczny element SVG, który wyświetla się dobrze, ale gdy dodaję identyczny element z JavaScript, to nie wyświetla się. Dlaczego to??dynamiczny element svg dodany przez JavaScript nie działa

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

Źródło

2014-12-15 Jason S

Zastosowanie

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

zamiast

document.createElement('svg')

Objaśnienie:

Elementy SVG muszą być tworzone w przestrzeni nazw SVG i dlatego nie mogą być tworzone przez createElement, zamiast tego należy użyć parametru createElementNS, podając obszar nazw SVG jako pierwszy argument.

createElement zasadniczo tworzy elementy html zwane svg i circle, a nie elementy SVG.

Tekst/html tak naprawdę nie ma przestrzeni nazw, więc parser HTML magicznie przełącza się do przestrzeni nazw SVG po napotkaniu elementu <svg>. Jeśli zmienisz typ MIME na pewien obszar nazw XML, np. http://www.w3.org/1999/xhtml/ potrzebujesz wtedy atrybutu xmlns na głównym elemencie <html>, a także na elemencie <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>

Źródło

2014-12-15 17:05:21

dziwne. Dlaczego pojawia się wtedy pierwsze koło? Nie mam żadnego odniesienia do przestrzeni nazw SVG. –

Pojawia się pierwsze kółko, ponieważ przeglądarka wie, jakiej przestrzeni nazw użyć, gdy znajdzie element '' wewnątrz elementu ''. Ma kontekst. Wywołanie "createElement (" circle ")' z definicji tworzy nowy element w "domyślnej" przestrzeni nazw, która dla przeglądarki jest HTML - nie SVG. –

dynamiczny element svg dodany przez JavaScript nie działa

Odpowiedz

Powiązane problemy