Angenommen, ich habe folgendes document (fiddle):Wie bekomme ich die globalen Koordinaten eines gruppierten SVG-Elements?
<svg>
<g transform="translate(50,50)">
<rect width="20" height="20" style="fill:black;">
</g>
</svg>
Wie kann ich die globalen Koordinaten des rect Element erhalten vorausgesetzt, ich weiß nicht, dass es in einer Gruppe ist?
Es war eigentlich ziemlich schwer zu finden. Die Suche nach Methoden von SVGElement führt zu Seiten, die sagen SVGElement hat keine Methoden! Es tut in der Tat eine Menge von Methoden, aber sie werden vererbt:
http://www.w3.org/TR/SVG/types.html#InterfaceSVGLocatable
Je nachdem, was Sie wollen Sie das Ergebnis getCTM oder getScreenCTM können eine SVGPoint, zu transformieren und so erfahren, wo Sie Element :
root = document.getElementById('root')
rec = document.getElementById('rec')
point = root.createSVGPoint()
# This is the top-left relative to the SVG element
ctm = rec.getCTM()
console.log point.matrixTransform(ctm)
# This is the top-left relative to the document
ctm = rec.getScreenCTM()
console.log point.matrixTransform(ctm)
Sie könnten die Funktion .getBoundingClientRect() verwenden den Begrenzungsrahmen zu erhalten. Verwenden Sie dann die Werte height, width, top und left, um die Mittelposition Ihres Elements zu ermitteln.
Siehe https://developer.mozilla.org/es/docs/Web/API/Element/getBoundingClientRect
Schön! Ich wusste nichts über matrixTransform. Das Javascript ist leer in deiner Geige. Hast du aktualisiert? Versuche es auszuprobieren. –
Funktioniert! Vielen Dank. Working Fiddle: http://jsfiddle.net/T8aZP/14/ –
Ich habe versucht Thedeeno verbundenen Geige, aber ich habe nicht das Ergebnis, das ich erwartet hatte. Hier ist eine Verzweigung, die getBBox benutzt, um die anfänglichen Koordinaten des Punktes zu setzen: http://jsfiddle.net/kitsu_eb/T8aZP/15/ –