svg.js - How to get X position from SVG text element

Question

I want to get the position from a text element inside a SVG using svg.js but I always get 0. The position should be relative to the svg element, after that I would place anothe element over that text.

 window.onload=function(){ let mapa = SVG('#map').size('100%', '100%'); let txtText = SVG("#elements text").text(); let posX = SVG("#elements text").x(); let posVal = SVG("#elements text").has($(this).text() == "Messi"); $(".results").html("Text " + txtText + " position X is: " + posX); } 

 body { font-family: "Calibri"; } .results { width: 100%; text-align: center; font-size: 1.4rem; margin: 5vh 0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.12/svg.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="results">asd</div> <svg version="1.1" id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 553 492" enable-background="new 0 0 553 492" xml:space="preserve"> <g id="elements"> <rect x="12" y="17" fill="#006633" width="525" height="462"/> <path fill="#339933" d="M495,130c-2,68.4,26,142-51,211s-116,131-244,63S-39,373,77,237S140,96,252,69s173-53,220-22S497,63,495,130 z"/> <text transform="matrix(1 0 0 1 210.7305 325.9219)" fill="#FFFFFF" font-size="80px">Messi</text> </g> </svg> 

Thanks

Answer 1

Since the position is set by a transformation, you have to get it from the transformation info, like so:

 window.onload=function(){ let mapa = SVG('#map').size('100%', '100%'); let txtText = SVG("#elements text").text(); let posVal = SVG("#elements text").has($(this).text() == "Messi"); let posX = SVG("#elements text").transform().translateX*SVG("#elements text").transform().scaleX; $(".results").html("Text " + txtText + " position X is: " + posX); } 

 body { font-family: "Calibri"; } .results { width: 100%; text-align: center; font-size: 1.4rem; margin: 5vh 0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.12/svg.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="results">asd</div> <svg version="1.1" id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 553 492" enable-background="new 0 0 553 492" xml:space="preserve"> <g id="elements"> <rect x="12" y="17" fill="#006633" width="525" height="462"/> <path fill="#339933" d="M495,130c-2,68.4,26,142-51,211s-116,131-244,63S-39,373,77,237S140,96,252,69s173-53,220-22S497,63,495,130 z"/> <text transform="matrix(1 0 0 1 210.7305 325.9219)" fill="#FFFFFF" font-size="80px">Messi</text> </g> </svg> 

Answer 2

Alternatively you can use text.rbox(svg) to get a bounding box around the visual representation of your text relative to svg . With box.x you get the value you need