jQuery gives errors when called externally from a SVG

[digijin]

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

<script type="text/javascript" xlink:href="jquery/jquery-1.4.min.js"/>

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.

[john]

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

[pekarna]

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.

[pekarna]

See the RFE ticket #6910

[rwaldron]

Reset priority to low, per triage docs

[anonymous]

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!

[digijin]

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.

[mpedrotti]

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.

Pseudocode:

if ( !document.body && !jQuery.isXMLDoc(document) ) {
return setTimeout( jQuery.ready, 1 );
}

[john]

See thoughts in #7584.