Geek Answers Handbook

Is there a way to add a case sensitive attribute using jQuery?

I am working with jQuery to modify svg data on the fly ... one of the things I need to do is change the "viewBox" attribute. However, when using jQuery, as in the snippet below, it does toLower () for the attribute, so the “viewBox” becomes the “viewbox”. Normally, I wouldn't care, but that seems to have broken svg rendering (at least on Mac OS X in the search device and in Safari).

Is there a way to change this initially in jQuery (via a flag or something like that), or will I have to replace the string after that?

var $svg = $('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"></svg>'); // do some work here $svg.attr('viewBox', 0 + ' ' + 0 + ' ' + 288 + ' ' + 288);
+4
source share
3 answers

If you do not want to modify the library itself, I see no way to avoid replacing the string.

+1
source

You can use the SVG DOM API to set the viewBox:

 $svg.each(function(index,node){ node.viewBox.baseVal.x = 0 node.viewBox.baseVal.y = 0 node.viewBox.baseVal.width = 288 node.viewBox.baseVal.height = 288 })

More information can be found in the SVG specification: http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

+3
source

How about if you exit the jQuery object just to set the attribute. eg.

 var $svg = $('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"></svg>'); $svg[0].setAttribute('viewBox', 0 + ' ' + 0 + ' ' + 288 + ' ' + 288);

Note: you can also check this jQuery plugin: http://keith-wood.name/svg.html

+1
source

More articles:


All Articles