Skip to main content

Bug Tracker

Side navigation

#11352 closed bug (wontfix)

Opened February 15, 2012 04:34PM UTC

Closed February 15, 2012 07:32PM UTC

delegate on inline SVG with < use > element throws error

Reported by: desandro Owned by:
Priority: low Milestone: None
Component: misc Version: 1.7.1
Keywords: Cc:
Blocked by: Blocking:
Description

See http://jsfiddle.net/desandro/SawTC/

With an event delegate on an inline SVG, you can click on the orange circle, which was rendered with <circle> element, but clicking on the red or blue circle throws an error. The red and blue circle are rendered with <use> . The error is

Uncaught TypeError: Cannot call method 'toLowerCase' of undefined
jquery-1.7.1.js:2827

About <use>: It allows you to define a shape and re-use it multiple times without having to define it again. http://www.w3.org/TR/SVG/struct.html#UseElement

If I inspect the red or blue circle, I can get its nodeName from the reference element #my-circle.

Attachments (0)
Change History (2)

Changed February 15, 2012 04:47PM UTC by desandro comment:1

_comment0: Browsers, tested on Mac OSX 10.7.3 \ \ + occurs in Chrome 18 \ + occurs in Safari 5.1.3 \ + no error in Firefox 10, this is always the svg element \ + occurs in Opera 11.61 \ \ in jQuery 1.6.4, No error is thrown, but no click event is triggered when clicking the <use> elements1329324522000517

Browsers, tested on Mac OSX 10.7.3

+ occurs in Chrome 18

+ occurs in Safari 5.1.3

+ no error in Firefox 10, this is always the svg element

+ occurs in Opera 11.61

in jQuery 1.6.4, No error is thrown, but no click event is triggered when clicking the <use> elements


Hack/Fix is to set CSS

svg use { pointer-events: none; }

Changed February 15, 2012 07:32PM UTC by sindresorhus comment:2

component: unfiledmisc
priority: undecidedlow
resolution: → wontfix
status: newclosed