Почему значения атрибутов jQuery auto lower casing?

Я работаю с SVG, который непосредственно помещается в файл HTML

<svg>
   Contents...
</svg>

Использование javascript/jQuery Я хочу добавить атрибут в SVG

$("svg").attr("viewBox", "0 0 166 361");

Ниже приведен модифицированный SVG после запуска выше script

<svg viewbox="0 0 166 361">
   Contents...
</svg>

Заметьте, что он не видит viewbox, а не viewBox. Поскольку viewbox (нижний регистр) ничего не делает, мне нужно, чтобы он был viewBox (camelcase)

Любые идеи?

** Обновление **

Я провел небольшой тест, где я отобразил атрибут viewBox со стороны сервера, затем я запустил script выше. Вы можете видеть, что 1. При визуализации со стороны сервера это нормально. 2. jQuery не распознал атрибут camelCase viewBox и вставил другой во всех нижних регистрах.

<svg version="1.1" id="Layer_1" x="0pt" y="0pt" width="332" 
     height="722" viewBox=" 0 0 100 100" viewbox="0 0 166 332">
...
</svg>

Ответ 1

Я могу зависеть от типа вашего документа кодирования. Документы XHTML должны использовать строчные буквы для всех элементов HTML и имен атрибутов. Я не уверен в HTML.

Обновление 2

Единственное решение, которое я мог найти, это использовать:

$("svg")[0].setAttribute("viewBox", "0 0 166 361");

Обновление

Я не могу объяснить это по какой-либо причине, я протестировал на своем собственном хосте, потому что JsFiddle всегда использует XHTML (boo!). Во всех случаях он был строчным, но он по-прежнему был элементом SVG в FF, Chrome и IE9 (я не знаю, были ли они действительными, потому что я не знаю, что SVG боюсь).

Ответ 2

Поскольку html нечувствителен к регистру, а теги xhtml и атрибуты должны быть более строчными, jQuery преобразует имя атрибута в нижний регистр. Поскольку xml чувствителен к регистру, это проблема для встроенного языка XML, когда они используют имена атрибутов верблюжьего случая, например SVG.

Вы можете использовать jQuery hooks для обработки этих имен атрибутов, которые хотели бы, чтобы случай не преобразовывался. Если jQuery найти jQuery.attrHooks[attributename].set для его установки он будет использовать его для установки атрибута. То же самое для jQuery.attrHooks[attributename].get, когда он пытается получить значение атрибута. Например:.

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

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

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

Ответ 3

http://docs.jquery.com/Won't_Fix#SVG.2FXML.2FVML_Bugs

jQuery распознает, что они toLower все имена атрибутов, но не хотят делать исключения/удалять эту строку, поскольку ошибки, связанные с SVG, игнорируются (toLower является излишним, на мой взгляд).

Ответ 4

вы можете использовать его. Я думаю, вы видите это в панели инструментов разработчика

его тонкий

его просто показывает его строчный

но если вы попытаетесь предупредить значение верблюжьего случая - вы увидите результат.

попробуйте сделать:

alert(("svg").attr("viewBox"));