#6007 closed bug (patchwelcome)

Opened February 02, 2010 03:24AM UTC

Closed April 17, 2011 12:13AM UTC

Last modified March 13, 2012 11:19PM UTC

jQuery gives errors when called externally from a SVG

Reported by:	digijin	Owned by:	john
Priority:	low	Milestone:	1.next
Component:	core	Version:	git
Keywords:	xml svg	Cc:
Blocked by:		Blocking:

Description

in a svg file if I include a link to jquery with a tag like

with jQuery 1.4 I get the error

Error: d.style is undefined

Source File: /jquery-1.4.min.js

Line: 33

using 1.3.2 I get the error

Error: K.style is undefined

Source File: /jquery-1.3.2.min.js

Line: 19

I assume the error has something to do with the document type as I use this same library in many places and this is the only place it raises an error. I can replicate this in firefox 3.5 with all addons disabled.

Attachments (0)

Change History (12)

Changed February 02, 2010 01:47PM UTC by john comment:1

component:	unfilled → core
milestone:	1.4.2 → 1.5
owner:	→ john
status:	new → assigned

This is something that we can check in to for jQuery 1.5 (when we look at other SVG/XHTML/XML issues).

Changed August 16, 2010 09:53PM UTC by pekarna comment:2

Verified with <script xlink:href="http://code.jquery.com/jquery-1.4.2.js"/>

div.style.display = "none"; // div.style is undefined LINE 834

It's in the anonymous "main" function when creating the general-purpose div.

Changed August 16, 2010 10:25PM UTC by pekarna comment:3

See the RFE ticket #6910

Changed October 19, 2010 06:45AM UTC by snover comment:4

milestone:	1.4.4 → 1.5

Changed October 22, 2010 06:29PM UTC by rwaldron comment:5

priority:	major → low

Reset priority to low, per triage docs

Changed November 21, 2010 04:43AM UTC by snover comment:6

keywords:	svg → xml svg

Changed November 21, 2010 04:48AM UTC by snover comment:7

blocking:	→ 7584

Changed February 04, 2011 03:03PM UTC by anonymous comment:8

With jquery 1.5 the error changed to "b.style is undefined" but it's the same and still there.

Please? This makes jquery completely unusable inside svg!

Changed February 04, 2011 11:03PM UTC by digijin comment:9

it is possible to use jquery with a svg, but you need to be a bit tricky and embed it in the parent of the svg and call it from there. I dont have any examples handy, but I have done it before.

Changed February 05, 2011 01:09AM UTC by jitter comment:10

milestone:	→ 1.next
version:	1.4.1 → git

Changed March 28, 2011 08:24PM UTC by mpedrotti comment:11

When the document element is svg, there are at least 2 problems and 2 subproblems to solve:

1. In the immediate function for jQuery.support, call createElementNS for XML documents.

jQuery 1.5.2RC1 has 4 occurrences of createElement for div, 1 for select, 1 for option, and 1 for script.

Pseudocode for the first occurrence:

var isXML = jQuery.isXMLDoc(document), div = isXML ?
document.createElementNS("http://www.w3.org/1999/xhtml", "div") :
document.createElement("div");

Subproblem: Neither jQuery.isXMLDoc nor Sizzle.isXML are defined at this point in the code.

2. In the anonymous function for W3C box model and so on, insert a body element in a foreignObject element in the svg document element:

Pseudocode:

var ..., foreignObject,
// is document.documentElement always defined at this point?
isSVG = document.documentElement.namespace === "http://www.w3.org/2000/svg";

if ( !body ) {
if ( isSVG ) {
body = document.createElementNS("http://www.w3.org/1999/xhtml", "body");
foreignObject = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
foreignObject.setAttribute("visibility", "hidden"); // is this necessary?
foreignObject.setAttribute("x", 0); // the following are necessary
foreignObject.setAttribute("y", 0);
foreignObject.setAttribute("width", 1);
foreignObject.setAttribute("height", 1);
foreignObject.appendChild(body);
document.documentElement.appendChild(foreignObject);
} else {
return;
}
}

// Check for box model, and so on

if (isSVG) { /* include body and foreignObject in the clean up */ }

Subproblem: The anonymous function is never called because the ready function makes sure body exists, but body doesn't exist if the document element is svg.