Skip to content

Instantly share code, notes, and snippets.

@pafnuty
Created May 22, 2015 07:56
Show Gist options
  • Save pafnuty/558c9f0f50c66d05c13a to your computer and use it in GitHub Desktop.
Save pafnuty/558c9f0f50c66d05c13a to your computer and use it in GitHub Desktop.
hasClass, addClass, removeClass, toggleClass для SVG-элементов на чистом JS
/**
* Работаем с классами у SVG-элементов
* Код добавляет возможность использовать следующие функции:
* hasClass, addClass, removeClass, toggleClass
*
* Использование:
* var svgEl = document.querySelector('.svg-selector');
* svgEl.hasClass('className'); // hasClass
* svgEl.addClass('className'); // addClass
* svgEl.removeClass('className'); // removeClass
* svgEl.toggleClass('className'); // toggleClass
*
* @see https://gist.github.com/branneman/8436956
* @see http://toddmotto.com/hacking-svg-traversing-with-ease-addclass-removeclass-toggleclass-functions/
*/
if (SVGElement && SVGElement.prototype) {
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);
}
};
SVGElement.prototype.toggleClass = function (className) {
if (this.hasClass(className)) {
this.removeClass(className);
}
else {
this.addClass(className);
}
};
}
@dekairi
Copy link

dekairi commented Jun 25, 2018

Thank you very much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment