3

The width seems to be zero (or null) always for an svg:text tspan element in Firefox & Safari.

The jQuery functions width() and height() returns 0 for SVG tspan text elements in Firefox 11 and IE 9. In both Chrome 17 and 19 they work as expected. I have also tried usinf offsetWidth & getComputedTextLength() both returns 0 or null.

this is my query code:

$('svg #aitext-2-front-middle').find('tspan').each(function(i){                
   var currWidth = $(this).width();
   console.log(currWidth);
});

This is the svg part:

<text id="aitext-2-front-middle" transform="matrix(1 0 0 1 81.7744 155.248)">
    <tspan x="66.287" y="57.6" font-family="'MyriadPro-Regular'" font-size="12">lightweight UIs using </tspan>
    <tspan x="39.72" y="72" font-family="'MyriadPro-Regular'" font-size="12">Adobe Illustrator CS5 (or above) </tspan>
    <tspan x="40.146" y="86.4" font-family="'MyriadPro-Regular'" font-size="12">along with some free resources. </tspan>
    <tspan x="79.385" y="100.8" font-family="'MyriadPro-Regular'" font-size="12">Let’s get started.</tspan>
</text>
GEOCHET
  • 21,119
  • 15
  • 74
  • 98
Pankaj
  • 585
  • 1
  • 9
  • 22

1 Answers1

0

A slight correction of your code makes it work in:

  • chrome (34)
  • firefox (28)
  • ie (ie10 standard mode and mimicking ie9)
  • safari 5.1.7 (windows)

have a look at this demo to see it working.

use 

$(document).ready(function() {
    $('svg #aitext-2-front-middle').find('tspan').each(function(i, e){
       var currWidth;

       currWidth = $(this).width();
       if (!currWidth) {
           currWidth = e.getBoundingClientRect().width;
           if ((!currWidth) && (e.parentNode.getBBox)) {
               currWidth = e.parentNode.getBBox().width;
           }
       }

       console.log(currWidth);
    });
});

unfortunately the implicit browser switches appear to be necessary. in particular, the tspan element does not have a getBBox method in ie, whereas the text element has.

EDIT:

an alternative might be to call getComputedTextLength() (kudos go here). Its output has been incorporated into the live demo

Community
  • 1
  • 1
collapsar
  • 17,010
  • 4
  • 35
  • 61
  • Everything you've posted has been answered in the question itself. – Reinstate Monica Cellio May 06 '14 at 13:32
  • @Archer no it hasn't - none of the browsers are close to the current versions, there is no mention of the jquery version at all nor of the context in which the js code snippet is used. – collapsar May 06 '14 at 13:38
  • Which version of FF? When do you call the code? Do you get the error with the live demo? – collapsar May 06 '14 at 14:14
  • @Pankaj Right, i've corrected the issue and i've updated the live demo. – collapsar May 07 '14 at 07:36
  • This wasn't a bad answer at all (especially for 2014!): x of an element is the sum of its siblings' width, and getComputedTextLength() will get us the width. Consider Chromium only fixed the getBBox bug now (6 years later), and [for WebKit the bug still exists, bug report here](https://bugs.webkit.org/show_bug.cgi?id=211282). – Fabien Snauwaert May 01 '20 at 12:12