Как обмануть jQ при помощи jQ? (CamelCase в атрибутах)
Приветствую!
Столкнулся с любопытной проблемой. Нужно в рамках одного проекта под jQuery работать с SVG. Оказалось, что jQuery берёт на себя наглость принудительно все имена атрибутов переводить в нижний регистр, а SVG енто XML и к регистру более чем чувствителен... ;) Разрабы jQuery более 3-х лет гордо отказываются фиксить баг переводя его в разряд фичи... http://bugs.jquery.com/ticket/11166#propertyform :blink: Предвижу советы написать на нативном javascript, что-то вроде: document.getElementsByTagName('svg')[0].setAttribute('someAttributes', 'x') Но запутка в том, что практически весь DOM выводится и обновляется jQuery и в итоге получаю всё равно someattributes Вот и получается нужен костыль для победы над jQuery средствами самой jQuery. Первое, что пришло в голову каким ниб регулярным выражением пройтись и исправить написание. Но не пойму можно ли взять и переписать кусок сырого хэтэмэля без использования attr() setAttribute() и т.п.... А может ещё какие варианты есть? |
Это, конечно, совет не в тему, но попробуй всю работу с svg оформить с помощью Snap.svg.
UPD. Или покажи код, чтобы было ясно как именно при помощи jQuery выводится SVG. |
Не знаю... Библиотека, как таковая особо и не нужна.
Проблема в том, что требуется внедрять сырой SVG прямо в html вроде: <svg baseProfile="full" width="300" height="200" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg"> ...... </svg> А jQuery гадит ;) если тащить код svg ещё какой-то библиотекой, то наверное ничего не изменится... только ещё библиотеку осваивать... -- И да, от jQuery отказаться нельзя... там много чего с ним понакручено... |
document.body.setAttribute('A', 1)
Chrome и Firefox добавят атрибут «а»:
[JS]document.body.attributes[0].name //→ 'a'
|
Хм.. та ки jQ плюёт на любой DOCTYPE и конвертит всё в нижний регистр. setAttribute нативного js работает корректно, но не в моём случае... Кроме костыля ничего не поможет... Разве что удалить toLowerCase() из кода jQ, но это как-то совсем грязно... ;)
|
Посмотрел у себя: в хроме и лисе в lowercase конвертит браузер, ишак регистр сохраняет.
|
Когда мы вставляем inline-svg в text/html контент с помощью innerHTML браузер выполняет преобразования и ничего с этим мы поделать не можем. В примере ниже атрибуты WIDTH и HEIGHT при вставке в документ без использования jQuery преобразуются в нижний регистр:
<!DOCTYPE html>
<html lang="en">
<head>
<title>…</title>
<meta charset="UTF-8">
</head>
<body>
<script>
var inlineSVG = '<svg WIDTH="300" HEIGHT="200"><polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /></svg>',
tmpContainer = document.createElement('div'),
svgElement;
tmpContainer.innerHTML = inlineSVG;
svgElement = document.body.appendChild(tmpContainer.firstChild);
tmpContainer = null;
alert([
svgElement.attributes[0].name,
svgElement.attributes[1].name
]);
</script>
</body>
</html>
|
Э нет... Так да не так
Напр.: в Вашем примере добавим атрибут svg baseProfile
<!DOCTYPE html>
<html lang="en">
<head>
<title>…</title>
<meta charset="UTF-8">
</head>
<body>
<script>
var inlineSVG = '<svg baseProfile="full" WIDTH="300" HEIGHT="200"><polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /></svg>',
tmpContainer = document.createElement('div'),
svgElement;
tmpContainer.innerHTML = inlineSVG;
document.body.appendChild(tmpContainer.firstChild);
tmpContainer = null;
svgElement = document.querySelector('svg');
alert([
svgElement.attributes[0].name,
svgElement.attributes[1].name,
svgElement.attributes[2].name,
]);
</script>
</body>
</html>
PS. И енто логично.., иначе как бы браузеры вообще отображали бы svg (в полном объёме) PPS. А как добавит батон "посмотреть" к примеру? PPPS. И да результат будет корректный alert выдаст baseProfile..... ----- В коде jQ туева хуча конвертаций в нижний регистр, на подобии:
// All attributes are lowercase
// Grab necessary hook if one is defined
if ( nType !== 1 || !jQuery.isXMLDoc( elem ) ) {
name = name.toLowerCase();
hooks = jQuery.attrHooks[ name ] ||
( jQuery.expr.match.bool.test( name ) ? boolHook : nodeHook );
}
К сожалению я не настолько владею предметом, что бы найти непосредствено корень зла и пропатчить его. По этому написание костыля мне кажется более простой задачей, но и с ней я пока не справляюсь... ;) |
хм ну да isXMLDoc для inline-svg будет возвращать false…
можно попробовать декоратор для jQuery.isXMLDoc написать, который будет дополнительно проверять, что элемент не вложен в <svg>. |
Ченибудь типа такого
jQuery.isSVG = new function () {
function isSVG(node) {
return node.nodeName.toLowerCase() == 'svg';
}
return function (elem) {
while (elem) {
if (isSVG(elem)) {
return true;
}
elem = elem.parentNode;
}
return false;
};
};
jQuery.isXMLDoc = new function () {
var isXMLDoc = jQuery.isXMLDoc;
return function (elem) {
return jQuery.isSVG(elem) || isXMLDoc(elem);
};
};
не проверял на работоспособность -------------------------- а блин там же в условии nType !== 1, весь jQuery.attr придется переопределять |
| Часовой пояс GMT +3, время: 20:21. |