it-swarm.com.de

Rufen Sie mit jQuery einen Begrenzungsrahmen für den SVG-Pfad ab

Ich möchte die getBBox () für SVG-Pfad in Jquery erhalten. Ich habe es so versucht

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

Ich habe den Pfad zu einem SVG-Element hinzugefügt. Ich habe ein anderes Element in SVG ausprobiert, z. B. einen Textknoten. In diesem Fall gibt es den Wert für den Begrenzungsrahmen zurück.

Wie kann ich den Begrenzungsrahmen für einen Pfad in SVG berechnen?

<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 "/>
12
SivaRajini

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

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

Beispiel

Wenn Sie einen Wert ungleich Null für das Beispiel und einen Nullwert in Ihrem Code erhalten, muss etwas anderes passieren, das Sie uns nicht gezeigt haben. 

Die wahrscheinlichsten Ursachen sind, dass der Pfad ein untergeordnetes Element von <defs> ist, dh, Sie verwenden ihn nur indirekt in einem Muster oder ClipPath. Alternativ dazu hat er einen Anzeigestil von "none". In diesem Fall würde er nicht gerendert werden Box.

12
Robert Longson

Die getBBox() native Implementierung in Webkit ist fehlerhaft. Den Bug-Tracker finden Sie hier. Eigentlich ist es behoben jetzt

Eine Lösung ist die Verwendung einer SVG-Bibliothek, die über eigene Algorithmen zur Berechnung solcher Angelegenheiten verfügt. Eine davon ist Raphael.js .

Sie könnten Raffaelselement.getBBox() verwenden, das dasselbe tut wie die native getBBox().

10
Nik Kyriakides

Auch mir fällt es schwer, die JQuery-Syntax für mich zu nutzen. Dieser zurückgegebene Uncught TypeError: Object [object Object] hat keine Methode 'getBBox' :

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

... weil ich den Array-Index weggelassen hatte (danke @Christian Vielma, unten)!

Standard-Javascript funktionierte jedoch für mich und ich konnte die Breite der (in meinem Fall) RECT in der Chrome-Konsole anzeigen:

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

Sie könnten das also stattdessen versuchen.

6
MSC

Versuchen Sie Element.getBoundingClientRect (). Es ist aus dem HTML-DOM, funktioniert aber für SVG-Elemente (ohne viel Umwandlung).

0
OsamaBinLogin

Eine Sache, die Sie sicherstellen müssen, ist, dass Ihre SVG zum DOM hinzugefügt und nicht getrennt wird. Stellen Sie auch sicher, dass Ihr SVG-Element

0
yeahdixon