jQuery SVG, why can't I addClass?

前端 未结 15 1847
失恋的感觉
失恋的感觉 2020-11-22 02:25

I am using jQuery SVG. I can\'t add or remove a class to an object. Anyone know my mistake?

The SVG:



        
相关标签:
15条回答
  • 2020-11-22 02:37

    After loading jquery.svg.js you must load this file: http://keith-wood.name/js/jquery.svgdom.js.

    Source: http://keith-wood.name/svg.html#dom

    Working example: http://jsfiddle.net/74RbC/99/

    0 讨论(0)
  • 2020-11-22 02:39

    Based on above answers I created the following 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;
    };
    
    0 讨论(0)
  • 2020-11-22 02:39

    Inspired by the answers above, especially by Sagar Gala, I've created this API. You may use it if you don't want or can't upgrade your jquery version.

    0 讨论(0)
  • 2020-11-22 02:40

    Edit 2016: read the next two answers.

    • JQuery 3 fixes the underlying issue
    • Vanilla JS: element.classList.add('newclass') works in modern browsers

    JQuery (less than 3) can't add a class to an SVG.

    .attr() works with SVG, so if you want to depend on jQuery:

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

    And if you don't want to depend on jQuery:

    var element = document.getElementById("item");
    // Instead of .addClass("newclass")
    element.setAttribute("class", "oldclass newclass");
    // Instead of .removeClass("newclass")
    element.setAttribute("class", "oldclass");
    
    0 讨论(0)
  • 2020-11-22 02:40

    Here is my rather inelegant but working code that deals with the following issues (without any dependencies):

    • classList not existing on <svg> elements in IE
    • className not representing the class attribute on <svg> elements in IE
    • Old IE's broken getAttribute() and setAttribute() implementations

    It uses classList where possible.

    Code:

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

    Example usage:

    var el = document.getElementById("someId");
    if (hasClass(el, "someClass")) {
        removeClass(el, "someClass");
    }
    addClass(el, "someOtherClass");
    
    0 讨论(0)
  • 2020-11-22 02:41

    I use Snap.svg to add a class to and SVG.

    var jimmy = Snap(" .jimmy ")
    
    jimmy.addClass("exampleClass");
    

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

    0 讨论(0)
提交回复
热议问题