Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A jQuery plugin which allows you to easily wrap SVG elements with an HTML DOM interface, such that jQuery can work with them

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 .rbenv-version
Octocat-spinner-32 MIT-LICENSE
Octocat-spinner-32 README.textile
Octocat-spinner-32 compile.sh
Octocat-spinner-32 jquery.wrap-svg.coffee
Octocat-spinner-32 jquery.wrap-svg.js
README.textile

JQuery.fn.wrapSvg

Inspired by http://stackoverflow.com/questions/3294553/jquery-selector-svg-incompatible

Why?

SVG DOM elements have a different interface than other DOM elements, therefore rendering much of jQuery’s functionality useless against it

The snippet pasted in the referenced StackOverflow link did not work with Firefox 15, as it threw an error when accessing an SVG object property through prototypal inheritance, hence the get / set accessor defined for every vanilla SVG property.

The wrapper objects themselves only need be created once. They are reused by creating a new object, with the reference _svgEl defined, and __proto__ set to the wrapper object.

The wrapper wraps each SVG DOM element in a jQuery selection, causing them to emulate an HTML DOM interface, thereby rendering many jQuery methods such as addClass, hide, etc. functional again.

A study regarding which jQuery methods work with the wrapper, and which ones still don’t, has not been performed.

Requires a modern browser with JavaScript 1.8.5. Should work with the following browsers:

  • Firefox 4+
  • Internet Explorer 9+
  • Safari 5+
  • Chrome 5+

Usage:

$("svg rect").wrapSvg().addClass("selected")

Who

  • Original idea by Aleksandar Totic
  • Improvements by Tim Harper, Berton Earnshaw, with Red Brain Labs
Something went wrong with that request. Please try again.