Side navigation
#5706 closed bug (duplicate)
Opened December 23, 2009 12:58PM UTC
Closed November 21, 2010 04:42AM UTC
Last modified March 10, 2012 07:09AM UTC
.attr() fails with TypeError when used on foreign elements, such as SVG
Reported by: | rdworth | Owned by: | |
---|---|---|---|
Priority: | high | Milestone: | 1.5 |
Component: | core | Version: | 1.4a2 |
Keywords: | attr attribute TypeError foreign svg getAttribute setAttribute | Cc: | |
Blocked by: | Blocking: |
Description
For foreign elements in an HTML document, the .attr() method fails for getting and setting values, as it attempts to use
//DOM HTML var value = elem[name]; elem[name] = value;
instead of
//DOM Core var value = elem.getAttribute(name); elem.setAttribute(name, value);
A simple test of this, in a browser that supports foreign elements in HTML documents (must implement document.createElementNS):
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute('width', 100); jQuery(rect).attr('width', 200);
In jQuery 1.4a2, this fails with TypeError: setting a property that has only a getter.
References:
- HTML5 - Foreign Elements
- Anne’s Weblog - HTML5: the foreign lands (mathematics and graphics)
- Snook.ca - SnookSurvey Element Attributes in JavaScript, comment by molily
- Snook.ca - SnookSurvey Element Attributes in JavaScript, comment by PPK
- Snook.ca - SnookSurvey Element Attributes in JavaScript, comment by Anne van Kesteren
- John Resig - .nodeName Case Sensitivity
Attachments (0)
Change History (6)
Changed December 23, 2009 02:29PM UTC by comment:1
Changed January 06, 2010 12:32AM UTC by comment:2
component: | unfilled → core |
---|---|
milestone: | 1.4 → 1.5 |
Richard - We're going to tackle this, and a number of other XML/XHTML/XUL/SVG related issues post-1.4. Thanks for the patch!
Changed April 07, 2010 11:32PM UTC by comment:3
Moved jQuery patch to a feature branch: http://github.com/rdworth/jquery/commits/svgfriendly
Changed October 19, 2010 06:49AM UTC by comment:4
milestone: | 1.4.4 → 1.5 |
---|---|
priority: | major → high |
status: | new → open |
Changed November 21, 2010 04:42AM UTC by comment:5
resolution: | → duplicate |
---|---|
status: | open → closed |
There is a current check in .attr() for isXMLDoc, but we need a fix that works for foreign elements in HTML documents, meaning the fix needed here cannot be based on the type of document the element is from or in, but based on whether the element is from a namespace other than HTML. Patches (including tests):
This fixes .attr() by not using the DOM HTML method of getting and setting attributes if the element is detected to be foreign. In this case, it falls back to DOM Core's .getAttribute() and .setAttribute(). Tests included.
This adds a new function, isForeignElement. This is similar to isXML (isXMLDoc in jQuery), except that it's based on the namespace of the element itself, rather than the type of document it's in/from, or the way it's parsed (text/html vs. application/xhtml+xml). In the case of IE, we'll get nothing from .namespaceURI, but IE doesn't support foreign elements anyway. So in this case we fall back to using isXML. This means the function isn't defined as detecting whether an element is foreign to the document it's in, but whether the element is foreign to the HTML namespace. See tests in above commit.
References: