Get bounding-box von SVG-Pfad mit Hilfe von jQuery

Möchte ich, um die getBBox() für svg-Pfad in jquery. ich habe versucht, wie diese

$("#"+ path id)[0].getBBox() -> returns x=0,y=0,width=0,height=0

Habe ich Hinzugefügt, den Pfad zu einem SVG-element. Ich habe versucht, einige andere element in SVG, zum Beispiel text-Knoten in diesem Fall gibt es einige bounding box Wert.

Wie kann ich das berechnen der bounding box für einen Pfad in SVG?

<path id="container_svg_John_0" fill="none" stroke-width="3" stroke="url(#container_svg_John0Gradient)" stroke-linecap="butt" stroke-linejoin="round" d="M -2390.2 -125.8888888888889 L 0 0 M 0 0 L 251.60000000000002 -45.77777777777778 M 251.60000000000002 -45.77777777777778 L 503.20000000000005 -11.444444444444445 M 503.20000000000005 -11.444444444444445 L 629 -183.11111111111111 "/>

InformationsquelleAutor der Frage SivaRajini | 2013-05-04

  1. 11

    getBBox ist eine native SVG-Methode und ist auch nicht Teil von jquery, so würden Sie schreiben müssen,

    $("#"+ path id)[0].getBBox()

    Beispiel

    Wenn Sie einen nicht-null-Wert für die Beispiel-und ein null-Wert in Ihrem code, dann muss es etwas anderes passiert sein, dass haben Sie nicht gezeigt.

    Sind die wahrscheinlichsten Ursachen sind, dass der Weg ein Kind <defs> d.h. Sie sind nur mittelbar in die ein Muster oder clipPath oder alternativ den es hat eine display-style none " in dem Fall wäre es auch nicht erbracht werden, so hätte keine bounding-box.

    InformationsquelleAutor der Antwort Robert Longson

  2. 10

    Die getBBox() native Implementierung in Webkit buggy ist, finden Sie die bug-tracker hier. Eigentlich ist Es festen jetzt

    Eine Lösung ist die Verwendung einer SVG Bibliothek, die es hat eigene algorithmen für die Berechnung von solchen Dingen, einer von Ihnen ist Raphael.js.

    Nutzen Sie Raphael - element.getBBox()die nicht die gleiche Sache wie die native getBBox().

    InformationsquelleAutor der Antwort Nicholas Kyriakides

  3. 6

    Auch ich habe eine harte Zeit, sich mit der JQuery-syntax zu arbeiten für mich. Dieser kehrte Uncaught TypeError: Object [object object] has no method 'getBBox':

    console.log($("#testtext").getBBox().width);

    ... weil ich versäumt hatte, den array-index (danke @Christian Vielma, unten)!!!

    Jedoch standard-Javascript für mich gearbeitet und ich war in der Lage, um die Anzeige der Breite des (in meinem Fall) RECT in der Chrome console:

    console.log(document.getElementById("testtext").getBBox().width);

    So könnten Sie versuchen, statt.

    InformationsquelleAutor der Antwort MSC

Schreibe einen Kommentar