getElementsByTagName error on jQuery manipulation using SVGWeb renderer

[GoogleCodeExporter]

What steps will reproduce the problem?
1. add a linked svg to a html page with jquery support.
2. select the contentDocument of the linked svg in a variable e.g. svgdoc .
3. use variable svgdoc with jQuery to attempt to manipulate document. e.g:
  d = document.getElementById('ii').contentDocument;
  $(d.firstChild).find('#r1').attr("fill",'#ffff00');
4. When using native Firefox SVG it changes the fill color of object with id 
"r1" to yellow.
5. When forcing SVGWeb renderer it gasps on jQuery with the error:
context.getElementsByTagName is not a function

What is the expected output? What do you see instead?
jQuery should be able to manipulate the document

What version of the product are you using? On what operating system,
browser, and version of Flash?
Flash 10.1, Firefox 3.6.8

Please provide any additional information below. Reduced test cases are
always appreciated!

The function:
changeColor = function () {
  d = document.getElementById('ii').contentDocument;
  $(d.firstChild).find('#r1').attr("fill",'#ffff00');
}
resides on a javascript linked to the html document.
an <a> element calls this function on an onclick event.

svg file:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70.866 70.866" version="1.1" 
xmlns:cc="http://creativecommons.org/ns#" 
xmlns:dc="http://purl.org/dc/elements/1.1/">
 <defs id="defs4"></defs>
 <metadata id="metadata7">
  <rdf:RDF>
   <cc:Work rdf:about="">
    <dc:format>image/svg+xml</dc:format>
    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
    <dc:title/>
   </cc:Work>
  </rdf:RDF>
 </metadata>
  <script language="javascript">
    document.onload = function () {

    }
    function reColor () {
          //parent.jQuery("#c1").attr("style",'fill:00ff00');
          document.getElementById("c1").setAttribute("fill",'#00ff00');
    }
  </script>
 <g id="layer1" stroke-linejoin="miter" fill-rule="evenodd" stroke="#000" stroke-linecap="butt" stroke-width="1px">
  <path id="c1" d="m47.857,26.313a21.161,21.161,0,1,1,-42.321,0,21.161,21.161,0,1,1,42.321,0z" onclick="parent.svgAlert();" fill="#F00"/>
  <rect id="r1" height="35" width="35" y="30.33" x="26.964" onclick="reColor();" fill="#00F"/>
 </g>
</svg>

The function runs OK with the native Firefox renderer (svg element changes 
color).

Original issue reported on code.google.com by tiago.fr...@gmail.com on 19 Aug 2010 at 11:19

[GoogleCodeExporter]

I have just browsed the users list and noticed other users are getting this 
problem outside the context of jQuery usage, so it's a bigger problem.

Original comment by tiago.fr...@gmail.com on 20 Aug 2010 at 1:13

[GoogleCodeExporter]

SVG Web only supports getElementByTagNameNS. I'm not sure why Brad did not add 
getElementByTagName as well.

As an experiment, you could replace "getElementsByTagName(" with 
"getElementsByTagNameNS(null," throughout the jquery source and see if that 
works.

Original comment by grick23@gmail.com on 21 Aug 2010 at 2:19

• Changed state: Accepted

[GoogleCodeExporter]

getElementsByTagName isn't namespace aware; it's very hard to support it for 
namespace aware markup like SVG and is quite glitchy which is why I supported 
getElementsByTagNameNS instead.

JQuery doesn't natively support SVG. You have to use JQuery SVG to do this:

http://keith-wood.name/svgRef.html

JQuery SVG hooks into JQuery's CSS selector syntax to also allow you to work 
with SVG elements in the SVG namespace.

I'd suggest getting JQuery SVG working with SVG Web to see if it solves your 
problem. I vote for marking this bug INVALID.

Original comment by bradneub...@gmail.com on 27 Aug 2010 at 1:10

[GoogleCodeExporter]

I have not geeked into the difference between the two functions. The problem 
with jQuery SVG is that it does not support IE. That is why I am turning to 
SVGWeb.

I like jQuery's power for DOM manipulation though, albeit I had my share of 
using the plain DOM functions for that. jQuery just makes it so much simpler. 

If it's not a problem of SVGWeb per se, but rather a lacking functionality of 
jQuery, I can just go there and file a RFE for jQuery. 

Original comment by tiago.fr...@gmail.com on 27 Aug 2010 at 12:07

[GoogleCodeExporter]

In the other hand, namespaces add a specificity which 'complicates matters' in 
DOM manipulation. I may just not wish to restrict my tag searching to a single 
namespace, I want to traverse the whole DOM tree.
It's a different function with a different purpose, and a useful one at that, 
and each o the 2 functions have their place and are part of the DOM, I think 
that being part of the DOM itself is enough reason for this bug to keep valid, 
if SVGWeb actually is striving to be fully compliant to the DOM. 

Original comment by tiago.fr...@gmail.com on 27 Aug 2010 at 12:30

[GoogleCodeExporter]

I have just opened the W3C DOM Document and read the functions, 
getElementsByTagNameNS should support * as a special namespace URI to encompass 
all namespaces. As fas as my limited understanding goes, that would cause it to 
work just like getElementsTagName (am I right?).

In theory, GetElementsByTagName could just piggyback on getElementsByTagNameNS 
support using '*' as the namespace URI. Of course, god is in the details, I 
don't know if it would work for sure.

My 0.02 cents.

Original comment by tiago.fr...@gmail.com on 27 Aug 2010 at 12:42

[GoogleCodeExporter]

I originally tried to support getElementByTagName but ran into very divergent 
behaviors on the different browsers. Unfortunately SVG is a namespaced language 
and getElementsByTagNameNS must be used with it.

Original comment by bradneub...@gmail.com on 27 Aug 2010 at 5:18

[GoogleCodeExporter]

Yes, but aren't these overridden/created in svgweb? getElementsByTagNameNS does 
not even exist in IE, therefore svgweb must have its own implementation.

My proposal is, based off svgweb's getElementsByTagNameNS, to implement the 
geElementsByTagName method on svgweb created nodes/elements which should give a 
consistent, predictable behavior.

Original comment by tiago.fr...@gmail.com on 27 Aug 2010 at 7:33

[GoogleCodeExporter]

I originally implemented getElementByTagName in a long ago SVG Web build, but 
ran into very divergent behavior cross-browser and pulled it and didn't finish 
it. getElementsByTagName isn't namespace name aware and leads to very 
unexpected and buggy behavior if you try to drive things through it. The 
original code I created to try to deal with it led to lots of glitches. For 
example, it can slow down the most common HTML behavior since I don't have a 
namespace:

function getElementByTagName(tagName) {
  // have to filter here for all SVG tag names -- what about collisions like SVG TITLE?
  // if it's not an SVG tag name.... then call IE's native getElementByTagName
}

In the pseudo code above, you see I would have to filter on the tag name to 
know whether it's an HTML or SVG tag since there is no namespace. This greatly 
slows down the native HTML getElementByTagName behavior which I try never to do 
in SVG Web.

I still think this bug should be marked WONTFIX. If you want SVG-aware JQuery 
behavior use JQuery SVG, which adds in the getElementsByTagNameNS hooks that 
JQuery's selector needs to be namespace aware internally.

Original comment by bradneub...@gmail.com on 27 Aug 2010 at 10:47