Я использую 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.');
});
 

Редактировать 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");
 

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

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

В 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 amp;amp; ( 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 и лучше подходит для плагинов.

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

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

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

Основываясь на приведенных выше ответах, я создал следующий 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;
};
 

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

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

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

Просто добавьте отсутствующий конструктор прототипа ко всем узлам 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');
 

Вся заслуга принадлежит Тодду Мото.

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

пример

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

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

Опубликованный пост jQuery 2.2 и 1.12 содержит следующую цитату:

Хотя jQuery — это библиотека HTML, мы согласились, что поддержка классов для элементов SVG может быть полезной. Теперь пользователи смогут вызывать методы .addClass(), .removeClass(), .toggleClass() и .hasClass() в SVG. Теперь jQuery изменяет атрибут class, а не свойство 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> 

Я использую Snap.svg для добавления класса в и SVG.

 var jimmy = Snap(" .jimmy ")

jimmy.addClass("exampleClass");
 

http://snapsvg.io/docs/#Element.addClass

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

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

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

Код:

 var classNameContainsClass = function(fullClassName, className) {
    return !!fullClassName amp;amp;
           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) amp;amp; 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 amp;amp; 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");
 

Одним из обходных путей может быть addClass в контейнер элемента svg:

 $('.svg-container').addClass('svg-red'); 

 .svg-red svg circle{
    fill: #ED3F32;
} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="svg-container">
  <svg height="40" width="40">
      <circle cx="20" cy="20" r="20"/>
  </svg>
</div> 

Я написал это в своем проекте, и это работает … наверное;)

 $.fn.addSvgClass = function(className) {

    var attr
    this.each(function() {
        attr = $(this).attr('class')
        if(attr.indexOf(className) < 0) {
            $(this).attr('class', attr ' ' className  ' ')
        }
    })
};    

$.fn.removeSvgClass = function(className) {

    var attr
    this.each(function() {
        attr = $(this).attr('class')
        attr = attr.replace(className , ' ')
        $(this).attr('class' , attr)
    })
};    
 

примеры

 $('path').addSvgClass('fillWithOrange')
$('path').removeSvgClass('fillWithOrange')
 

Вдохновленный ответами выше, особенно Сагар Галой, я создал этот API. Вы можете использовать его, если не хотите или не можете обновить свою версию jquery.

Или просто используйте методы DOM старой школы, когда у JQ где-то посередине есть обезьяна.

 var myElement = $('#my_element')[0];
var myElClass = myElement.getAttribute('class').split(/s /g);
//splits class into an array based on 1  white space characters

myElClass.push('new_class');

myElement.setAttribute('class', myElClass.join(' '));

//$(myElement) to return to JQ wrapper-land
 

Изучите людей DOM. Даже в framework-palooza 2016 года это помогает довольно регулярно. Кроме того, если вы когда-нибудь услышите, как кто-то сравнивает DOM со сборкой, ударьте их для меня.