Вопрос по jquery – Почему jQuery автоматически опускает значения атрибутов корпуса?

23

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

<svg>
   Contents...
</svg>

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

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

Вот модифицированный SVG после запуска вышеуказанного скрипта

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

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

Есть идеи?

** Обновить **

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

<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>

Ваш Ответ

4   ответа
22

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

Update 2

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

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

Update

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

Firefox Example Chrome Example IE Example

Обновлено 2, нужно использовать Javascript, встроенный в setAttribute, я думаю :(
Я изменил свой HTML-файл на & lt;! DOCTYPE html & gt; чтобы увидеть, поможет ли это, но не повезло.w3.org/TR/SVG/coords.html#ViewBoxAttribute это ссылка на атрибут viewBag. Есть еще идеи? Brett Allred
Это сработало. Спасибо! Brett Allred
4

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

Вы можете использовать хуки jQuery для обработки тех имен атрибутов, которые вы не хотите преобразовывать в регистр. Если 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 будет использовать ваши методы установки / получения для управления этими атрибутами.

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

Я не заметил. Смотря наjQuery.fn.attr, он должен делегировать установку атрибута в ловушку. Как это установить строчную версию атрибута тоже?github.com/jquery/jquery/blob/master/src/attributes/…
Хотя этот метод работает, он не предотвращает возникновения старого поведения. Таким образом, элемент в конечном итоге с обоимиviewbox а такжеviewBox атрибутов. Не то чтобы он не работал, но он не так чист, как мог бы.
@JasmineHegman Исправлено. jquery ожидает, что установщик вернет true, если установка атрибута прошла успешно
1

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

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

-3

выcan используй это. Я думаю, вы видите это вie developer tool bar

все в порядке

это просто показывает его в нижнем регистре

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

стараться сделать :

alert(("svg").attr("viewBox"));
("svg").attr("viewBox") показать значение & quot; viewbox & quot ;. jQuery устанавливает имя в нижний регистр при получении значения тоже.
Поэтому, когда я запускаю предупреждение, оно возвращает мне значение viewBox, независимо от того, является ли оно обычным или верблюжьим. Однако, если атрибут не существует в элементе, и я добавляю его, используя этот метод, он помещает его в нижний регистр. Brett Allred

Похожие вопросы