комментарии в пути SVG

Question

Я экспериментировал с JQuery и SVG, я сделать мой путь, но теперь я хочу, чтобы изменить это (на основании некоторого пользовательского ввода) Я делаю что-то вроде

 
    var dpath = $('path').attr("d"); 
    $('path').attr("d",dpath.replace("150 150", "450 450")); 

, который прекрасно работает, но это не полезно, когда мой путь растет, поэтому я задаюсь вопросом, есть ли возможность поместить ярлык или комментарий на пути в качестве замены? Поиск "svg path comments" дает мне все записи на форумах с комментариями, что не очень полезно. Я близок к тому, чтобы написать свой собственный код «pseudo svg» с заменой pseudo, но есть ли альтернатива в svg? приветствует, Jeroen.

Answer 1

SVG имеет интерфейс к неэтериализованной форме элементов пути. Его описание находится в the SVG spec. Вы должны иметь возможность расширять объекты, добавляя свои собственные свойства в качестве маркеров.

Я никогда не использовал интерфейс, но вы должны быть в состоянии получить доступ к списку сегментов пути с помощью свойства pathSegList (определенное в SVGAnimatedPathData), делая что-то вдоль линий $("path")[0].pathSegList (в [0] есть, чтобы получить к фактическому элементу DOM вместо объекта jQuery)

Answer 2

Для большинства методов pathSegList требуется, чтобы индекс сегмента был получен/обработан, поэтому могут быть сценарии, в которых предпочтительным является сериализованное представление. принять относительное движение на 0 единиц (например, «0,0 0,0») в качестве замены крюка. поскольку у вас есть разные команды pathh для относительного рисования, вы можете даже привязать свои крючки к контексту. обратите внимание, что количество nops бесконечно, если вы рассматриваете шаблоны типа 'm 0, m 0, -' - ваш пробег может варьироваться в зависимости от качества вашего svg-генератора.

Обратите внимание, что метод замены js работает на регулярных выражениях, так что вам не понадобится замена крюка вообще для добавления или добавления разделителей путей.

наилучшими пожеланиями, Карстен

пс: я знаю Маттис ответ был вокруг в течение долгого времени ...

Answer 3

Это пример, в котором конечная точка линии перемещается с помощью JQuery SVG:

$('#svgdiv').svg();       //svgdiv - the id of the html element that contains your svg canvas. 
var svg = $('#svgdiv').svg('get'); 
var linePath = $($('#linePath'), svg.root()); //linePath - the id of the path element whose end point coordinates I want to change. 
var segments = linePath[0].pathSegList; 
for (var i=0; i < segments.numberOfItems; i++){ 
    var segment = segments.getItem(i); 
    switch(segment.pathSegType){ 
    case SVGPathSeg.PATHSEG_LINETO_ABS: 
    segment.x = x; 
    segment.y = y; 
    //other cases.. 
    } 
} 

Если у вас есть несколько сегментов линии в том же пути и хотите изменить определенный сегмент, вам нужно будет

• отслеживать строку, сохраняя индекс сегмента pathSegList в переменной.
• или если ваш пользовательский ввод является щелчком мыши, используйте координаты мыши, чтобы найти сегмент.

This хорошее сообщение о SVGPathElement. This - документация SVG DOM.