Bug Tracker

Opened 10 years ago

Closed 9 years ago

Last modified 8 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 10 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 10 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 10 years ago by pekarna

See the RFE ticket #6910

comment:4 Changed 10 years ago by snover


comment:5 Changed 10 years ago by Rick Waldron

Priority: majorlow

Reset priority to low, per triage docs

comment:6 Changed 10 years ago by snover

Keywords: xml added

comment:7 Changed 10 years ago by snover

Blocking: 7584 added

comment:8 Changed 9 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 9 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 9 years ago by jitter

Milestone: 1.next
Version: 1.4.1git

comment:11 Changed 9 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 9 years ago by john

Resolution: patchwelcome
Status: assignedclosed

See thoughts in #7584.

Note: See TracTickets for help on using tickets.