Question

对于Firefox和＆amp ;;中的svg：text tspan元素，宽度似乎总是为零（或为null）。 Safari浏览器。

对于Firefox 11和IE 9中的SVG tspan文本元素，jQuery函数width（）和height（）返回0。在Chrome 17和19中，它们按预期工作。我也试过usinf offsetWidth＆amp; getComputedTextLength（）都返回0或null。

这是我的查询代码：

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

这是svg部分：

<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>

Answer 1

稍微更正一下代码就可以了：

chrome（34）
firefox（28）
ie（即10标准模式和模仿ie9）
safari 5.1.7（windows）

查看this demo以查看其有效。

使用

$(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);
    });
});

遗憾的是，隐式浏览器切换似乎是必要的。特别是，tspan元素在ie中没有getBBox方法，而text元素则有。{/ p>

修改：

另一种选择可能是致电getComputedTextLength()（kudos go here）。它的输出已被纳入现场演示

无法在SVG中获得tspan的宽度

1 个答案: