StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Firstly, use createElementNS, as you are doing. createElement (without NS) automatically lowercases element names inside HTML documents, according to the <a href="https://developer.mozilla.org/en/DOM/document.createElement" rel="noreferrer">Mozilla documentation</a>.</p> <p>Secondly, don't trust Google Chrome's "Inspect Element" feature here. It seems to display every element in lowercase, no matter what the actual nodeName is. Try this:</p> <pre> > document.createElementNS("http://www.w3.org/2000/svg", "textPath").nodeName "textPath" > document.createElement("textPath").nodeName "TEXTPATH" </pre> <p>Your problem might be an unrelated issue. For example, this code works fine in Firefox, but breaks in Chrome (12.0.742.112):</p> <pre><code><html> <head> <script> function animateSVG() { var svgNS = "http://www.w3.org/2000/svg"; var textElement = document.getElementById("TextElement"); var amElement = document.createElementNS(svgNS, "animateMotion"); console.log(textElement); console.log(amElement); console.log(amElement.nodeName); amElement.setAttribute("path", "M 0 0 L 100 100"); amElement.setAttribute("dur", "5s"); amElement.setAttribute("fill", "freeze"); textElement.appendChild(amElement); //amElement.beginElement(); }; </script> </head> <body onload="animateSVG()"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(100,100)"> <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24"> It's SVG!  </text> </g> </svg> </body> </html> </code></pre> <p>My issue probably has something to do with the broken handling of animateMotion in Chrome (<a href="http://code.google.com/p/chromium/issues/detail?id=13585" rel="noreferrer">Issue 13585</a>).</p> <p>Your issue might be the same, or it might be another issue, but make sure you're not being fooled by the element inspector.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload