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은 근본적인 문제를 해결
• 바닐라 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에는 HTML 및 SVG 요소 모두에 대해 작동하는 element.classList 가 있습니다 . 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 요소에서 작동하지 않는 이유는 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', '');
});

위의 답변을 바탕으로 다음 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');

모든 크레딧은 Todd Moto 로갑니다 .

jQuery는 SVG 요소 클래스를 지원하지 않습니다. 당신은 요소를 직접 얻을 수 있습니다 $(el).get(0)및 사용 classList과 add / remove. 최상위 SVG 요소가 실제로는 일반적인 DOM 객체이며 jQuery의 다른 모든 요소와 같이 사용할 수 있다는 점에서 트릭이 있습니다. 내 프로젝트에서 필자가 필요한 것을 처리하기 위해 이것을 만들었지 만 Mozilla Developer Network 에 제공된 설명서 에는 대안으로 사용할 수있는 shim이 있습니다.

예

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는 이제 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>

다음은 (종속성이없는) 다음 문제를 다루는 다소 우아하지만 작동하는 코드입니다.

• classList<svg>IE의 요소 에는 존재하지 않습니다.
• classNameIE의 요소에 대한 class속성을 나타내지 않음<svg>
• 오래된 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");

Snap.svg를 사용하여 클래스를 SVG에 추가합니다.

var jimmy = Snap(" .jimmy ")

jimmy.addClass("exampleClass");

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

한 가지 해결 방법은 svg 요소의 컨테이너에 Class를 추가하는 것입니다.

$('.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')

위의 답변, 특히 Sagar Gala에서 영감을 얻은이 API를 만들었습니다 . jquery 버전을 원하지 않거나 업그레이드 할 수없는 경우 사용할 수 있습니다.

또는 JQ에 원숭이가 중간에있을 때 구식 DOM 메소드를 사용하십시오.

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 사람들을 배우십시오. 2016 년 프레임 워크 팔로 자에서도 꽤 정기적으로 도움이됩니다. 또한 누군가가 DOM을 어셈블리와 비교하는 것을 듣는다면 저를 위해 차십시오.