commentaires dans le chemin svg

Question

J'expérimente avec jquery et svg, je fais mon chemin, mais maintenant je veux changer cela (basé sur une entrée de l'utilisateur) je fais quelque chose comme

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

qui fonctionne très bien, mais pas utile quand mon chemin se développe, donc je me demande s'il y a une possibilité de mettre une étiquette ou un commentaire dans le chemin pour servir de crochet de remplacement? cherchant "svg path comments" me donne toutes les entrées dans les forums avec 'comments', ce qui n'est pas très utile. Je suis proche d'écrire mon propre pseudo svg "replaceble", mais y a-t-il une alternative possible dans svg? salutations, Jeroen.

Answer 1

SVG a une interface avec la forme non sérialisée des éléments de chemin. Sa description est au the SVG spec. Vous devriez être capable d'étendre les objets en ajoutant vos propres propriétés pour servir de marqueurs.

Je ne l'ai jamais utilisé l'interface, mais vous devriez être en mesure d'accéder à une liste des segments de chemin en utilisant la propriété pathSegList (définie dans SVGAnimatedPathData) en faisant quelque chose le long des lignes de $("path")[0].pathSegList (le [0] est là pour obtenir vers l'élément DOM réel au lieu de l'objet jQuery)

Answer 2

La plupart des méthodes pathSegList nécessitent que l'index du segment soit récupéré/manipulé, de sorte qu'il peut y avoir des scénarios dans lesquels la représentation sérialisée est préférable. prendre un mouvement relatif de 0 unité (par exemple 'm 0,0') en tant que crochet de remplacement. Comme vous avez différentes commandes pathh pour le dessin relatif, vous pouvez même attribuer vos hooks avec le contexte. notez que le nombre de nops est infini si vous considérez des modèles comme 'm 0, m 0, -' - votre kilométrage peut varier en fonction de la qualité de votre générateur de svg.

Notez que la méthode js replace fonctionne sur les expressions régulières, de sorte que vous n'avez pas du tout besoin d'un crochet de remplacement pour l'ajout ou le préchargement de segments.

meilleures salutations, Carsten

ps: je sais que la réponse de Mattis a été autour depuis longtemps ...

Answer 3

C'est un exemple dans lequel le point final d'une ligne est déplacée en utilisant 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.. 
    } 
} 

Si vous avez des segments de ligne multiples dans le même chemin et que vous voulez changer un segment particulier, vous devez

• Gardez une trace de la ligne en stockant l'index du segment pathSegList dans une variable.
• ou si votre saisie utilisateur est un clic de souris, utilisez les coordonnées de clic de la souris pour trouver le segment.

This un bon article sur SVGPathElement. This est la documentation SVG DOM.