2016-03-30 10 views
0

Ich möchte Textelemente nach beliebigen SVG-Pfade hinzufügen. Unten ist ein sehr einfaches Beispielbild dafür.Positionieren von Text entlang Svg Pfad

sample path

Die wirklichen pathes Komplex mehr sein kann, über die Probe nur zur Veranschaulichung.

Zur Zeit mache ich das im Anschluss an die jQuery SVG-Bibliothek:

var texts = svg.createText(); 
var textOutput = texts.string('').span(customText.content); 
svg.textpath(textStyle, '#' + textPath.attr('id'), textOutput); 

Dieses wenn auch nicht wirklich passend ist. Ich schätze, das liegt daran, dass die Pfade keine "Linien", sondern geometrische Formen sind. So scheint der Text wahrscheinlich nicht innerhalb des Pfades positioniert zu sein, sondern folgt stattdessen seinem Rand.

Jetzt frage ich mich, wie ich das vereinfachen könnte. Wäre es empfehlenswert, zusätzliche Linien hinzuzufügen, nur um den Weg zu weisen?

Danke für alle Hinweise.

+0

Zeichnen Sie eine unsichtbare Linie entlang der Hauptachse der Ellipse und legen Sie den Text darauf. –

+0

Vielleicht hilft diese Antwort? http://stackoverflow.com/questions/6999281/can-text-be-added-to-an-svg-path Nicht sicher, verstehe ich, was Sie versuchen zu tun. Die Antwort sollte auf jeden Pfad angewendet werden, egal ob es sich um eine Polylinie oder eine andere Linie handelt. – Nolo

+0

Ja, ich denke, ich werde für die unsichtbare Linie gehen. Vielen Dank! – Guite

Antwort

0

Eine unsichtbare Linie innerhalb des Bereichs zu zeichnen und dies für den Textfluss zu verwenden funktioniert in der Tat gut.