Bug Tracker

Opened 13 years ago

Closed 12 years ago

Last modified 11 years ago

#6007 closed bug (patchwelcome)

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: #7584


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.

Change History (12)

comment:1 Changed 13 years ago by john

Component: unfilledcore
Owner: set to john
Status: newassigned

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

comment:2 Changed 13 years ago by 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.

comment:3 Changed 13 years ago by pekarna

See the RFE ticket #6910

comment:4 Changed 12 years ago by snover


comment:5 Changed 12 years ago by Rick Waldron

Priority: majorlow

Reset priority to low, per triage docs

comment:6 Changed 12 years ago by snover

Keywords: xml added

comment:7 Changed 12 years ago by snover

Blocking: 7584 added

comment:8 Changed 12 years ago by 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!

comment:9 Changed 12 years ago by 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.

comment:10 Changed 12 years ago by jitter

Milestone: 1.next
Version: 1.4.1git

comment:11 Changed 12 years ago by 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") :

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

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


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);
} else {

// 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.


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

comment:12 Changed 12 years ago by john

Resolution: patchwelcome
Status: assignedclosed

See thoughts in #7584.

Note: See TracTickets for help on using tickets.