jQuery SVG, почему я не могу добавить класс? - PullRequest
Новая
       71

jQuery SVG, почему я не могу добавить класс?

280 голосов
/ 26 декабря 2011

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

Ответы [ 15 ]

2 голосов
/ 08 декабря 2015

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

var jimmy = Snap(" .jimmy ")

jimmy.addClass("exampleClass");

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

1 голос
/ 20 августа 2016

Одним из обходных путей может быть добавление класса в контейнер элемента 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>
0 голосов
/ 01 сентября 2017

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

$.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')
0 голосов
/ 20 декабря 2016

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

0 голосов
/ 11 июля 2016

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

Страница:
...