Влияет ли attr() в jQuery на нижний регистр?

Я пытаюсь манипулировать атрибутом svg 'viewBox', который выглядит примерно так:

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

Использование

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

Однако это создает новый атрибут в элементе, называемом "viewbox". Обратите внимание на строчную букву вместо предназначенной для camelCase. Есть ли другая функция, которую я должен использовать?

Ответ 1

Я смог использовать чистый javascript для получения элемента и установки атрибута с помощью

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

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

Ответ 2

Per http://www.w3.org/TR/xhtml1/#h-4.2 "Документы XHTML должны использовать строчные буквы для всех имен элементов HTML и атрибутов."

Поэтому, чтобы избежать преобразования атрибута в нижний регистр в документе XHTML, вам нужно создать элемент, определяющий пространство имен, с помощью document.createElementNS(), например:

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

Если вы планируете добавить элемент <use/>, вам также необходимо указать пространство имен при создании элемента, а также атрибут xlink:href, например:

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

Ответ 3

Вы можете использовать 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);
    },
  };
});

Теперь jQuery будет использовать ваш setter/getters для управления этими атрибутами.

Примечание, которое el.attr('viewBox', null) потерпело бы неудачу; ваш установщик крюка не будет вызван. Вместо этого вы должны использовать el.removeAttr('viewBox').

Ответ 4

вы хотите убедиться, что вы удалите attr, если он уже существует, прежде чем манипулировать им.

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

а затем воссоздавая его

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