На данный момент есть достаточно немало библиотек для работы с SVG, которые в полной мере позволяют работать с этим форматом, хотя, это обычный структурированный под графику подвид семейства XML, а значит есть вероятность работать с ним и обычным jQuery.
Получение элемента
Тут, как обычно, выборка посредством селекторов css работает в полном объеме:
$('.dlg-section #svg-inner>svg>g polygon'). ...
Работа с атрибутами
Аналогично, как и с HTML данные атрибутов можно легко заполучить посредством функции attr():
$("polygon").attr("fill", "#f8ff34");
Особенно следует отметить работу с атрибутами-классами, которые именуются через разделитель :, к примеру «kh\:number», «kh\:id», для их выборки надо принимать следующий прием:
var number = $(this).attr("kh\:number"); var id = $(this).attr("kh\:id");
Дополнительные данные элемента SVG — аналогично, как и в HTML, работают превосходно посредством функции data():
$("polygon").data("original-title")
Можно добавлять и удалять классы, посредством функции addClass() и removeClass() или проверить, есть ли такой класс у элемента hasClass():
if($(this).hasClass("selected-order")) { $(this).removeClass("selected-order"); }else { $(this).addClass("selected-order"); }
Итерация однотипных элементов
Прекрасно работает функция each() , если нужно итерировать массив однотипных эелемнтов, а текущий элемент можно заполучить через $(this):
var orderArray = new Array(); $('.dlg-section #svg-inner>svg>g polygon').each(function() { var o_row = $(this).attr("kh\:rownumber"); var o_number = $(this).attr("kh\:number"); var o_id = $(this).attr("kh\:id"); var o_price = $(this).data("original-title").split("Стоимость:")[1];//Стоимость // var obj = {"id":o_id,"row":o_row, "seat":o_number, "price": o_price}; orderArray.push(obj); });