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 요소에서 작동하지 않는 이유는 3.0 이전의 jQuery 버전 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"}

SVGAnimatedStringjQuery와 같이 해당 객체를 문자열로 캐스트 [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 요소인지 여부를 감지하고, 가능한 경우 해당 요소가 SVG 요소로 넘어 가기 전에 객체 의 baseVal속성을 사용합니다 SVGAnimatedString.class 합니다.

문제에 대한 jQuery의 역사적 입장 :

jQuery는 현재이 문제를 수정 안 함 페이지 에 나열 합니다. 관련 부품은 다음과 같습니다.

SVG / VML 또는 네임 스페이스 요소 버그

jQuery는 주로 HTML DOM 용 라이브러리이므로 SVG / VML 문서 또는 네임 스페이스 요소와 관련된 대부분의 문제는 범위를 벗어납니다. SVG에서 버블 링되는 이벤트와 같이 HTML 문서에 “블리드”되는 문제를 해결하려고합니다.

분명히 jQuery는 jQuery 코어 범위 밖에서 완전한 SVG 지원을 고려했으며 플러그인에 더 적합했습니다.

답변

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

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

/*
 * .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;
};

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

this.addClass('clicked');

this.removeClass('clicked');