Does the attr() in jQuery force lowercase?

Question

I'm trying to manipulate the svg 'viewBox' attribute which looks something like this:

<svg viewBox="0 0 100 200" width="100" ...> ... </svg>

Using

$("svg").attr("viewBox","...");

However, this creates a new attribute in the element called "viewbox". Notice the lowercase instead of intended camelCase. Is there another function I should be using?

duplicate question http://stackoverflow.com/questions/10390346/why-is-jquery-auto-lower-casing-attribute-values — andres descalzo, Sep 11 '12 at 02:55

score 21 · Accepted Answer · answered Sep 11 '12 at 19:35

21

I was able to use pure javascript to get the element and set the attribute by using

var svg = document.getElementsByTagName("svg")[0];

and

svg.setAttribute("viewBox","...");

answered Sep 11 '12 at 19:35

bzuillsmith

3,072
3
20
38

score 4 · Answer 2 · edited Jan 04 '17 at 13:06

Per http://www.w3.org/TR/xhtml1/#h-4.2 "XHTML documents must use lower case for all HTML element and attribute names."

So in order to avoid having the attribute convert to lowercase in an XHTML document you need to create the element specifying a namespace using document.createElementNS(), like:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('viewBox', '0 0 512 512’);

If you plan to add a <use/> element you also need to specify the namespace while creating the element as well as the xlink:href attribute, like:

var use = document.createElementNS('http://www.w3.org/2000/svg','use');
    use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#your_svg_id');

score 1 · Answer 3 · edited Jun 25 '15 at 20:21

1

You could use jQuery hooks:

['preserveAspectRatio', 'viewBox'].forEach(function(k) {
  $.attrHooks[k.toLowerCase()] = {
    set: function(el, value) {
      el.setAttribute(k, value);
      return true;
    },
    get: function(el) {
      return el.getAttribute(k);
    },
  };
});

Now jQuery will will use your setter/getters to manipulate those attributes.

Note that el.attr('viewBox', null) would have failed; your hook setter won't be called. Instead you should use el.removeAttr('viewBox').

edited Jun 25 '15 at 20:21

ThiefMaster

285,213
77
557
610

answered Mar 05 '15 at 11:09

Dinoboff

2,502
2
25
26

While this method works, it does not prevent the old behavior from occurring. So an element will end up with both `viewbox` and `viewBox` attributes. Not that it won't work, but it isn't as clean as it could be. – Jasmine Hegman Mar 07 '15 at 00:14
1

Fixed. The setter should return `true` – Dinoboff Mar 07 '15 at 13:15

score -2 · Answer 4 · answered Sep 11 '12 at 02:42

-2

you want to make sure you remove the attr if it already exists before manipulating it

$("svg").removeAttr("viewBox")

and then recreating it

$("svg").attr("viewBox","...");

answered Sep 11 '12 at 02:42

COLD TOLD

12,989
3
31
49

Does the attr() in jQuery force lowercase?

4 Answers4

Linked

Related