Label in die "Mitte" eines SVG-Pfades setzen

Ich versuche, ein Etikett auf ein Polygon einer SVG-Datei zu zeichnen. Das Problem, dem ich gegenüberstehe, ist, ungefähr die Mitte dieses Polygons herauszufinden, um das Label zu platzieren, da die Koordinaten des Pfades im SVG-Format sind und analysiert werden müssen. Gibt es einen einfacheren Weg, das Zentrum eines Svg-Polygons zu bestimmen (vielleicht kann jemand eine Javascript-Bibliothek oder ein Snippet aufzeigen)? Ich benutze Raphael Javascript-Bibliothek, um die Svg zu manipulieren, aber es scheint nicht über die Standard-Svg-Funktionalität zu gehen.Label in die "Mitte" eines SVG-Pfades setzen

Quelle

2009-11-07 sol

Die einfachste Sache, die Sie versuchen könnten, ist, den Mittelpunkt zu berechnen, indem Sie den Durchschnitt aller Punkte im Polygon nehmen. Es sollte für alle außer den meisten unregelmäßigen Polygonen funktionieren. Ich habe den gleichen Algorithmus in meinen Programmen verwendet.

Viel Glück.

Quelle

2009-11-07 04:36:09 Randaltor

Sorry, für nicht klar meine Frage formulieren. Das Problem besteht eher darin, wie man die Koordinaten aus dem d-Attribut des Pfades erhält, das in diesem Format ist. um das Zentrum zu berechnen oder eine JavaScript-Bibliothek zu finden, die das tut, ohne dass ich das Attribut nach der Svg-Spezifikation analysiere. – sol

Das erste Problem, das zuerst gelöst werden muss, besteht darin, zuerst die SVG in ein Polygon umzuwandeln. Ich habe nach einem Code gesucht, um die SVG-Pfade in Polygone umzuwandeln, konnte aber keinen finden. Vielleicht müssen Sie die Quellcodes von Svg-Projekten ausgraben – ivanceras

Sie konnten die folgende Annäherung versuchen, für etwas ähnlich den Polygon Vorschlag machen, basierend auf SVG DOM-Methoden:

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); 
}

Ich denke, der einfachste Ansatz ist es, die Mitte des Weges Elements BoundingBox (pathelm zu verwenden. getBBox()), das ist einfacher als der Polygon-Vorschlag.

Quelle

2009-11-07 11:33:46

+11

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); 'hat den Trick für mich getan, thx. – lwe

Danke @Iwe! Das war viel einfacher, als ich mir vorstellen konnte :) – Viet

@ Iwes Kommentar verdient eine separate Antwort sein. Es ist ein einfacherer, anderer Ansatz mit unterschiedlichen Vor- und Nachteilen. Hier ist eine [** JSBIN-Demo von beiden, die Landformen in Vietnam und Kanada verwenden **] (http://jsbin.com/orAzoFI/3/edit), die einige wichtige Punkte und Unterschiede zeigen: dass keine Methode das Zentrum garantiert innerhalb der Form, und dass Eriks Methode das Zentrum zu Teilen des Pfades zieht, die mehr gebrochen/komplex sind/einen höheren relativen Umfang haben. – user568458

-2

einen Text-Tag in der es svg und Position ein, indem Sie die Breite und Höhe

Berechnung

<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>

Quelle

2012-10-18 11:36:16

Label in die "Mitte" eines SVG-Pfades setzen

Antwort

Verwandte Themen