Почему jQuery не может изменять атрибуты тега width / height элемента svg, но отлично работает с другими атрибутами?

Question

Я столкнулся с чрезвычайно удивительным поведением некоторых старых jQuery, которые не позволяют изменять атрибуты svg element width или height (не стили).Он просто не изменяет их и всегда молча терпит неудачу.

Он отлично работает с такими атрибутами, как mywidth, но не с width.

Обратите внимание, что это связано с какой-то очень старой версией jQuery.(v1.4.3), но все же мне просто любопытно обосновать это.

Настройка проста:

<svg id='mysvg'></svg>

и код JS:

$('#mysvg').attr('width','100');

ничего не делает, где:

$('#mysvg').attr('mywidth','100');

работает нормально.

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

Также я пытался поставить точку останова на изменение атрибута в Chrome, но он также не работает , он срабатывает для .attr('mywidht','100'), но делаетне для .attr('width','100).Он никогда не генерирует консольную ошибку, всегда завершается сбоем молча.

Существует ли какая-либо историческая причина или небезызвестная ошибка, которая препятствует изменению атрибута ширины и высоты тега svg HTML?

Обратите внимание, что в некоторых пользовательскихтег, такой как <mysvg>, он также отлично работает и добавляет атрибут width.

JSFiddle, воспроизводящий его: https://jsfiddle.net/d8703afx/

Похоже, attr('width') возвращает некоторые "особые" [object SVGAnimatedLength]

Answer 1

Используемая вами версия jquery (1.4.3) была выпущена в 2010 году, когда обновленный IE все еще был IE8, и нам все еще приходилось поддерживать такие вещи, как IE6, хотя слово «HTML5» было немногокак "летающая машина" в это время ...

Вы не должны использовать такую ​​старую версию этой библиотеки в настоящее время.Многие ошибки и новые функции были исправлены / добавлены в новых версиях.

Например, лучшая поддержка SVG-манипуляции, которая в то время все еще была "новой" технологией.

Так что, используя современную версию jQuery (или немного более новую)) вы сможете делать то, что вы хотите:

$("#mysvg").attr('xxwidth', '333');
$("#info").append("The xxwidth is: " + $("#mysvg").attr('xxwidth') + '<br>');

$("#mysvg").attr('width', '333');
$("#info").append("The width is: " + $("#mysvg").attr('width'));

<!-- not even up to date... current is 3.3.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<svg id="mysvg"></svg><br>

<span id="info"></span>

Answer 2

То, что $("#mysvg").attr('width') возвращает SVGAnimatedLength объект, на самом деле является хорошей подсказкой.Функция не возвращает атрибут, так как этот метод DOM:

document.querySelector("#mysvg").getAttribute('width')

, но свойство

document.querySelector("#mysvg").width

, которое для элементов SVG, которые реализуют это свойство, является объектом типа SVGAnimatedLength примерно с такой структурой:

{
    baseVal: {
        unitType: number,
        value: number,
        valueInSpecifiedUnits: number,
        valueAsString: number
    },
    animVal: { /* etc */ }
}

Отличие от свойств HTML width заключается в том, что SVG предоставляет анимированные значения и различные идентификаторы единиц.

Так что, вероятно,jQuery, при выполнении .attr('width', value) пытается также не устанавливать атрибут , а свойство width в число, которое будет правильным для элементов HTML.Но для SVG это должно произойти сбой, так как объект доступен только для чтения.

Вы можете просто установить атрибут с помощью метода DOM

document.querySelector("#mysvg").setAttribute('width', 100);