Как обернуть набор элементов SVG тегом <g>? - PullRequest
Новая
       1

Как обернуть набор элементов SVG тегом <g>?

4 голосов
/ 15 марта 2012

Как обернуть svg набор элементов тегом после того, как они созданы javascript (Raphael)?

Или как я могу закрыть тег g после определенных элементов? Поскольку я начинаю тэг g прежде, чем эти элементы будут созданы. В этом случае тег g запускается, но не заканчивается.

Вот мой код

Ответы [ 4 ]

2 голосов
/ 15 ноября 2012

Один из способов - добавить элемент g и добавить в него другие элементы. 

$("path").click(function() {
    var $svg = $("#mysvg"); // #mysvg is SVG doc
    var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    g.setAttribute("id", "g");
    $svg.append($(g));
    $svg.find("path").each(function() {
        $(this).css("stroke", "red").appendTo($(g));
    });
    $("#cont").html($svg); // #cont is svg "container", eg. div
});

Рабочий пример: http://jsbin.com/ayulaq/2

Он использует jQuery для упрощения операций DOM.Я использовал эту технику, чтобы добавить все дочерние элементы в SVG в одну родительскую группу, чтобы упростить (и ускорить) определение фактического размера ограничивающего прямоугольника всех элементов.Иногда документы SVG не объясняют ширину и высоту корневого элемента SVG, или это неправильно, и чтобы изменить размер документа SVG (или изменить размер вновь созданного элемента g [и так долго, пока все его дети], чтобы он соответствовал документу SVG), мы должны получить bboxкоторый охватывает все элементы.После приведенного выше кода мы можем вызвать $("#g")[0].getBBox(), чтобы получить размер всех элементов в SVG doc.Существует также этот способ, если размер имеет значение только: var setti = p.set(); setti.push(path1,path2); console.log(setti.getBBox());, но set подходит не во всех случаях.

Эта технология применяется также к перетаскиванию, чтобы ускорить перетаскивание больших наборов элементов.Вместо использования set Рафаэля, который изменяет атрибут преобразования каждого объекта в наборе индивидуально, вместо этого достаточно использовать g, достаточно изменить атрибут преобразования элемента g.

Конечно, это относится только к случаямБэкэнд SVG используется в Raphael.

0 голосов
/ 26 июня 2013

Если вы используете jQuery, вы можете использовать .wrapInner (), чтобы обернуть содержимое выбранного элемента в тег.

0 голосов
/ 15 марта 2012

У вас есть Paper.set () в Рафаэле. Это возвращает вам группу, и вы можете вставить свой прямоугольник в этот набор, и вы можете сделать 

group.rotate(45);

, чтобы получить функциональность, которую вы ищете.

Ссылка: http://raphaeljs.com/reference.html#Paper.set

0 голосов
/ 15 марта 2012

Вы не можете обернуть тег вокруг существующих элементов.У тега есть начальный и конечный тег, но не существует такого понятия, как начальный элемент и конечный элемент.

Вам необходимо создать элемент g и переместить существующие элементы в этот новый элемент.

...