jQuery SVG, почему я не могу добавить класс? - PullRequest
Новая
       72

jQuery SVG, почему я не могу добавить класс?

280 голосов
/ 26 декабря 2011

Я использую jQuery SVG.Я не могу добавить или удалить класс для объекта.Кто-нибудь знает мою ошибку?

SVG: 

<rect class="jimmy" id="p5" x="200" y="200" width="100" height="100" />

JQuery, который не добавляет класс: 

$(".jimmy").click(function() {
    $(this).addClass("clicked");
});

Я знаю, что SVG и jQuery работаютвместе прекрасно, потому что я могу нацелить объект и выдать предупреждение при нажатии: 

$(".jimmy").click(function() {
    alert('Handler for .click() called.');
});

Ответы [ 15 ]

418 голосов
/ 21 апреля 2012

Изменить 2016: прочитайте следующие два ответа.

  • JQuery 3 исправляет основную проблему
  • Vanilla JS: element.classList.add('newclass') работает в современных браузерах

JQuery (менее 3) не может добавить класс в SVG.

.attr() работает с SVG, поэтому, если вы хотите зависеть от jQuery: 

// Instead of .addClass("newclass")
$("#item").attr("class", "oldclass newclass");
// Instead of .removeClass("newclass")
$("#item").attr("class", "oldclass");

А если вы не хотите зависеть от jQuery: 

var element = document.getElementById("item");
// Instead of .addClass("newclass")
element.setAttribute("class", "oldclass newclass");
// Instead of .removeClass("newclass")
element.setAttribute("class", "oldclass");
75 голосов
/ 05 апреля 2013

В DOM API есть element.classList , который работает как с элементами HTML, так и с элементами SVG. Нет необходимости в плагине jQuery SVG или даже в jQuery. 

$(".jimmy").click(function() {
    this.classList.add("clicked");
});
69 голосов
/ 09 апреля 2015

jQuery 3 не имеет этой проблемы

Одно из изменений, перечисленных в ревизии jQuery 3.0 :

добавить манипуляции с классом SVG ( # 2199 , 20aaed3 )

Одним из решений этой проблемы было бы обновление до jQuery 3. Он прекрасно работает: 

var flip = true;
setInterval(function() {
    // Could use toggleClass, but demonstrating addClass.
    if (flip) {
        $('svg circle').addClass('green');
    }
    else {
        $('svg circle').removeClass('green');
    }
    flip = !flip;
}, 1000);
svg circle {
    fill: red;
    stroke: black;
    stroke-width: 5;
}
svg circle.green {
    fill: green;
}
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

<svg>
    <circle cx="50" cy="50" r="25" />
</svg>

Проблема:

Причина, по которой функции манипулирования классами jQuery не работают с элементами SVG, заключается в том, что в версиях jQuery до 3.0 используется свойство className для этих функций.

Выдержка из jQuery attributes/classes.js: 

cur = elem.nodeType === 1 && ( elem.className ?
    ( " " + elem.className + " " ).replace( rclass, " " ) :
    " "
);

Это работает так, как и ожидалось для элементов HTML, но для элементов SVG className немного отличается. Для элемента SVG className - это не строка, а экземпляр SVGAnimatedString.

Рассмотрим следующий код: 

var test_div = document.getElementById('test-div');
var test_svg = document.getElementById('test-svg');
console.log(test_div.className);
console.log(test_svg.className);
#test-div {
    width: 200px;
    height: 50px;
    background: blue;
}
<div class="test div" id="test-div"></div>

<svg width="200" height="50" viewBox="0 0 200 50">
  <rect width="200" height="50" fill="green" class="test svg" id="test-svg" />
</svg>

Если вы запустите этот код, вы увидите что-то вроде следующего в консоли разработчика. 

test div
SVGAnimatedString { baseVal="test svg",  animVal="test svg"}

Если бы мы приводили этот SVGAnimatedString объект к строке, как это делает jQuery, у нас было бы [object SVGAnimatedString], и именно здесь jQuery завершается сбоем.

Как плагин jQuery SVG справляется с этим:

Плагин jQuery SVG работает вокруг этого, исправляя соответствующие функции для добавления поддержки SVG.

Выдержка из jQuery SVG jquery.svgdom.js: 

function getClassNames(elem) {
    return (!$.svg.isSVGElem(elem) ? elem.className :
        (elem.className ? elem.className.baseVal : elem.getAttribute('class'))) || '';
}

Эта функция обнаружит, является ли элемент элементом SVG, и, если это так, будет использовать свойство baseVal объекта SVGAnimatedString, если оно доступно, перед тем как вернуться к атрибуту class.

Историческая позиция jQuery по этому вопросу:

jQuery в настоящее время перечисляет эту проблему на своей странице Не удалось исправить . Вот соответствующие части.

Ошибки SVG / VML или элементов пространства имен

jQuery - это, прежде всего, библиотека для HTML DOM, поэтому большинство проблем, связанных с документами SVG / VML или элементами пространства имен, находятся вне области видимости. Мы стараемся решать проблемы, которые «просачиваются» в документы HTML, такие как события, возникающие из SVG.

Очевидно, jQuery считал полную поддержку SVG вне области действия ядра jQuery и лучше подходил для плагинов.

38 голосов
/ 26 ноября 2013

Если у вас есть динамические классы или вы не знаете, какие классы уже могут быть применены, то этот метод, я считаю, является лучшим подходом: 

// addClass
$('path').attr('class', function(index, classNames) {
    return classNames + ' class-name';
});

// removeClass
$('path').attr('class', function(index, classNames) {
    return classNames.replace('class-name', '');
});
16 голосов
/ 13 июня 2014

На основе приведенных выше ответов я создал следующий API 

/*
 * .addClassSVG(className)
 * Adds the specified class(es) to each of the set of matched SVG elements.
 */
$.fn.addClassSVG = function(className){
    $(this).attr('class', function(index, existingClassNames) {
        return ((existingClassNames !== undefined) ? (existingClassNames + ' ') : '') + className;
    });
    return this;
};

/*
 * .removeClassSVG(className)
 * Removes the specified class to each of the set of matched SVG elements.
 */
$.fn.removeClassSVG = function(className){
    $(this).attr('class', function(index, existingClassNames) {
        var re = new RegExp('\\b' + className + '\\b', 'g');
        return existingClassNames.replace(re, '');
    });
    return this;
};
13 голосов
/ 27 декабря 2011

После загрузки jquery.svg.js необходимо загрузить этот файл: http://keith-wood.name/js/jquery.svgdom.js.

Источник: http://keith -wood.name / svg.html # dom

Рабочий пример: http://jsfiddle.net/74RbC/99/

7 голосов
/ 19 ноября 2014

Просто добавьте отсутствующий конструктор прототипа ко всем узлам SVG: 

SVGElement.prototype.hasClass = function (className) {
  return new RegExp('(\\s|^)' + className + '(\\s|$)').test(this.getAttribute('class'));
};

SVGElement.prototype.addClass = function (className) { 
  if (!this.hasClass(className)) {
    this.setAttribute('class', this.getAttribute('class') + ' ' + className);
  }
};

SVGElement.prototype.removeClass = function (className) {
  var removedClass = this.getAttribute('class').replace(new RegExp('(\\s|^)' + className + '(\\s|$)', 'g'), '$2');
  if (this.hasClass(className)) {
    this.setAttribute('class', removedClass);
  }
};

Вы можете использовать его таким образом, не требуя jQuery: 

this.addClass('clicked');

this.removeClass('clicked');

Все кредиты переходят на Тодд Мото .

5 голосов
/ 09 января 2016

jQuery 2.2 поддерживает манипуляции с классом SVG

Выпущено jQuery 2.2 и 1.12 включает следующую цитату:

Хотя jQuery - это библиотека HTML, мы согласились, что поддержка классов для элементов SVG может оказаться полезной. Теперь пользователи смогут вызывать .addClass () , .removeClass () , .toggleClass () и .hasClass () методы по SVG. jQuery сейчас изменяет атрибут класса, а не свойство className . Это также делает методы класса пригодными для использования в общих документах XML. Помните, что многие другие вещи не будут работать с SVG, и мы по-прежнему рекомендуем использовать библиотеку, посвященную SVG, если вам нужно что-то кроме манипуляций с классами.

Пример использования jQuery 2.2.0

Тесты:

  • .addClass ()
  • .removeClass ()
  • .hasClass ()

Если вы щелкнете по этому маленькому квадрату, он изменит свой цвет, потому что атрибут class добавлен / удален. 

$("#x").click(function() {
    if ( $(this).hasClass("clicked") ) {
        $(this).removeClass("clicked");
    } else {
        $(this).addClass("clicked");
    }
});
.clicked {
    fill: red !important;  
}
<html>

<head>
    <script src="https://code.jquery.com/jquery-2.2.0.js"></script>
</head>

<body>
    <svg width="80" height="80">
        <rect id="x" width="80" height="80" style="fill:rgb(0,0,255)" />
    </svg>
</body>

</html>
5 голосов
/ 23 июля 2013

jQuery не поддерживает классы элементов SVG. Вы можете получить элемент напрямую $(el).get(0) и использовать classList и add / remove. С этим тоже есть хитрость в том, что верхний элемент SVG на самом деле является обычным объектом DOM и может использоваться как любой другой элемент в jQuery. В моем проекте я создал это, чтобы позаботиться о том, что мне нужно, но документация, предоставленная в Mozilla Developer Network , имеет прокладку, которую можно использовать в качестве альтернативы.

пример 

function addRemoveClass(jqEl, className, addOrRemove) 
{
  var classAttr = jqEl.attr('class');
  if (!addOrRemove) {
    classAttr = classAttr.replace(new RegExp('\\s?' + className), '');
    jqEl.attr('class', classAttr);
  } else {
    classAttr = classAttr + (classAttr.length === 0 ? '' : ' ') + className;
    jqEl.attr('class', classAttr);
  }
}

Альтернатива, более сложная, - вместо этого использовать D3.js в качестве механизма выбора. Мои проекты имеют графики, которые построены с его помощью, так что это также входит в сферу моего приложения. D3 правильно изменяет атрибуты класса ванильных элементов DOM и SVG. Хотя добавление D3 только для этого случая, вероятно, будет излишним. 

d3.select(el).classed('myclass', true);
3 голосов
/ 11 февраля 2015

Вот мой довольно не элегантный, но работающий код, который решает следующие проблемы (без каких-либо зависимостей):

  • classList не существует на <svg> элементах в IE
  • className не представляет атрибут class на <svg> элементах в IE
  • Прежние IE сломаны getAttribute() и setAttribute() реализации

Он использует classList, где это возможно.

Код: 

var classNameContainsClass = function(fullClassName, className) {
    return !!fullClassName &&
           new RegExp("(?:^|\\s)" + className + "(?:\\s|$)").test(fullClassName);
};

var hasClass = function(el, className) {
    if (el.nodeType !== 1) {
        return false;
    }
    if (typeof el.classList == "object") {
        return (el.nodeType == 1) && el.classList.contains(className);
    } else {
        var classNameSupported = (typeof el.className == "string");
        var elClass = classNameSupported ? el.className : el.getAttribute("class");
        return classNameContainsClass(elClass, className);
    }
};

var addClass = function(el, className) {
    if (el.nodeType !== 1) {
        return;
    }
    if (typeof el.classList == "object") {
        el.classList.add(className);
    } else {
        var classNameSupported = (typeof el.className == "string");
        var elClass = classNameSupported ?
            el.className : el.getAttribute("class");
        if (elClass) {
            if (!classNameContainsClass(elClass, className)) {
                elClass += " " + className;
            }
        } else {
            elClass = className;
        }
        if (classNameSupported) {
            el.className = elClass;
        } else {
            el.setAttribute("class", elClass);
        }
    }
};

var removeClass = (function() {
    function replacer(matched, whiteSpaceBefore, whiteSpaceAfter) {
        return (whiteSpaceBefore && whiteSpaceAfter) ? " " : "";
    }

    return function(el, className) {
        if (el.nodeType !== 1) {
            return;
        }
        if (typeof el.classList == "object") {
            el.classList.remove(className);
        } else {
            var classNameSupported = (typeof el.className == "string");
            var elClass = classNameSupported ?
                el.className : el.getAttribute("class");
            elClass = elClass.replace(new RegExp("(^|\\s)" + className + "(\\s|$)"), replacer);
            if (classNameSupported) {
                el.className = elClass;
            } else {
                el.setAttribute("class", elClass);
            }
        }
    }; //added semicolon here
})();

Пример использования: 

var el = document.getElementById("someId");
if (hasClass(el, "someClass")) {
    removeClass(el, "someClass");
}
addClass(el, "someOtherClass");
Страница:
...