So setzen Sie den text in der Mitte einer svg-Pfad

Für das Rendern von SVG-ich bin mit jQuery SVG-plugin. Und nun will ich Sie zum hinzufügen von text zu jedem Pfad und polygon. Auf jsFiddle können Sie sehen, generiert markup-plugin.

Für die Erstellung von text schrieb ich den folgenden code:

var svgg = $("#rsr").svg('get');
var texts = svgg.createText();
svgg.textpath($("#Layer_x0020_1"),id, texts.string('We go ').
   span('up', { dy: -30, fill: 'red' }).span(',', { dy: 30 }).
   string(' then we go down, then up again'));

In den code auf jsFiddle Sie können sehen, dass die textpath tag existiert, aber es ist nicht sichtbar.
Wie, um text hinzuzufügen, um die Mitte jedes Weg?
Danke.

Was meinst du mit "die Mitte jeder Pfad"? Meinst du, dass Sie wollen, dass der text in der Mitte der Form, oder möchten Sie, dass der text zentriert auf dem Pfad selbst, aber immer noch nach dem Weg (in der Mitte etwa 50% der gesamten Weglänge)?
Ich möchte den text in der Mitte der Form.
Ok, dann bitte update/klären Sie Ihre Frage oben.

InformationsquelleAutor user1260827 | 2012-06-12

  1. 12

    Setzen Sie den text in einer geraden Linie auf der Oberseite der Form, in der Mitte der boundingbox finden Sie unter:

    http://jsfiddle.net/dYuAA/114/

    Es fügt nur einige javascript-text.

    function addText(p)
{
    var t = document.createElementNS("http://www.w3.org/2000/svg", "text");
    var b = p.getBBox();
    t.setAttribute("transform", "translate(" + (b.x + b.width/2) + " " + (b.y + b.height/2) + ")");
    t.textContent = "a";
    t.setAttribute("fill", "red");
    t.setAttribute("font-size", "14");
    p.parentNode.insertBefore(t, p.nextSibling);
}

var paths = document.querySelectorAll("path");
for (var p in paths)
{
    addText(paths[p])
}

    Oben sieht nur Pfad-Elemente, aber Sie können zwicken die Wähler zählen, was Sie brauchen.

    Scheint, wie die jsfiddle-Beispiel funktioniert nicht mehr.
    Sollte jetzt funktionieren.
    Genial vielen Dank!
    Jeder Weg, dies zu vermeiden: "Uncaught TypeError: p.getBBox ist keine Funktion" verwenden von Chrome, "SCRIPT438: SCRIPT438: Objekt unterstützt keine Eigenschaft oder Methode 'getBBox'" , in Microsoft-Edge " und "TypeError: p.getBBox ist nicht eine Funktion" bei der Verwendung von Firefox ?
    Passiert nicht in jeder dieser Browser auf meiner Maschine, habe Sie ausprobiert, läuft mit allen browser-Erweiterungen deaktiviert?

    InformationsquelleAutor Erik Dahlström

  2. 1

    Gibt es ein paar Probleme hier.

    a) SVG groß-und Kleinschreibung, so ist es textPath und nicht textpath.

    b) textPath eingeschlossen werden in eine <text> element, um gültig zu sein

    Hier ist Ihre jsFiddle behoben.

    textpath funktioniert auch. Aber, Jquery SVG nicht hinzufügen <text> element und xlink. Außerdem will ich suchen von text in der Mitte.
    xlink ist optional. startOffset="50" text-anchor="middle" zentriert. Ich habe aktualisiert das jsFiddle mit startOffset und text-anchor Attribute.
    Fiddle funktioniert nicht 🙁
    Ah, yep. Gerade probiert-es funktioniert auf Firefox, aber nicht wiedergegeben wird überhaupt nicht auf Chrom.
    Raise ein Fehler im Chrome - bugtracker und dann: code.google.com/p/chromium/issues/list

    InformationsquelleAutor Robert Longson

Schreibe einen Kommentar