Placez l'étiquette dans le “centre” d'un chemin SVG

Je suis en train de dessiner une étiquette sur un polygone d'un fichier svg. Le problème que je me pose est de savoir à peu près au centre de ce polygone à la place de l'étiquette, comme le chemin des coordonnées au format svg et doivent être analysés. Est-il un moyen plus facile de déterminer le centre d'un svg polygone (peut-être quelqu'un peut indiquer une bibliothèque javascript ou un extrait)? Je suis l'aide de Raphaël bibliothèque javascript pour manipuler le format svg, mais il ne semble pas aller au-delà de la norme svg fonctionnalité.

OriginalL'auteur sol | 2009-11-07

  1. 11

    Vous pouvez faire l'approximation suivante pour faire quelque chose de similaire pour le polygone suggestion, basée sur les méthodes du DOM de SVG:

    var totalPathLength = pathelm.getTotalLength();
var step = totalPathLength / 100;
for(var dist=0; dist < totalPathLength; dist+=step)
{
  var pt = pathelm.getPointAtLength(dist);
  addToAverage(pt.x, pt.y);
}

    Je pense que l'approche la plus simple est d'utiliser le centre de l'élément de chemin de boundingbox (pathelm.getBBox()), c'est plus simple que le polygone suggestion.

    PS: var bbox = p.getBBox(); var x = Math.floor(bbox.x + bbox.width/2.0); var y = Math.floor(bbox.y + bbox.height/2.0); a fait le tour pour moi, merci.
    Merci @Iwe! C'était beaucoup plus simple que je pouvais imaginer 🙂
    commentaire mérite d'être une réponse distincte. C'est plus simple, approche différente avec différents avantages et inconvénients. Voici un JSBIN de démonstration à la fois de l'aide le Vietnam et le Canada pays des formes montrant quelques points clés et les différences: que ni la méthode guarentees le centre sera à l'intérieur de la forme, et que d'Erik méthode tire du centre vers les parties du chemin d'accès qui sont plus contrastée/complexe/ont une relative supérieure à la circonférence.
    lire la dernière phrase de ma réponse, je ne suggère la getBBox méthode, même si je l'ai fait sortir comment calculer le centre de la bbox rectangle parce que je pensais que c'était si anodin. Il est vrai qu'aucune des méthodes de garantir la calculés centre est à l'intérieur de la forme.
    merci s'accoupler une charge , c'est ce que je cherchais

    OriginalL'auteur Erik Dahlström

  2. 0

    La chose la plus simple que vous pourriez essayer de faire est de calculer le centre en prenant la moyenne de tous les points du polygone. Il devrait fonctionner pour tous mais la plus irrégulière de polygones. J'ai utilisé le même algorithme pour la bonne effet dans mes programmes.

    Meilleur de la chance.

    Désolé, pour pas clairement phrasé à ma question. Le problème est plus sur la façon d'obtenir les coordonnées de la voie du d-attribut qui est dans ce format <path d="M 100 100 L À 300 L 100 200 300 z" fill="red" stroke="blue" stroke-width="3" /> afin de calculer le centre ou à trouver une bibliothèque javascript qui fait que, sans moi, l'analyse de l'attribut selon le svg spec.
    Le premier problème à résoudre est de convertir le svg dans un polygone en premier. J'ai été la recherche d'un code pour convertir le svg chemins en polygones, mais ne pouvait pas en trouver un. Peut-être à creuser sur le code source de svg projets

    OriginalL'auteur Randaltor

  3. -3

    Insérer une balise de texte à l'intérieur du svg et de la position par le calcul de la largeur et de la hauteur

     <svg width="447pt" height="559pt" viewBox="0 0 894 1118" version="1.1" xmlns="http://www.w3.org/2000/svg">
    ............
    ............

   <text x="450" y="300" font-family="Verdana" font-size="15" fill="red" >
        Text To Show
   </text>
</svg>

    OriginalL'auteur Ali Adravi