Оценок пока нет Работа с SVG посредством jQuery

На данный момент есть достаточно немало библиотек для работы с 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);
});

 

Пожалуйста, оцените материал

WebSofter

Web - технологии