我正在尝试在SVG中获取tspan
元素(位于text
元素内)的渲染宽度。
这是我的标记:
<text>
<tspan>Value 1</tspan>
<tspan>Value 2</tspan>
</text>
在视觉上,我希望值1向左浮动,而值2向右浮动,因此多个元素将对齐:
Value 1 Value 2
Value 10 Value 20
Value 100 Value 200
Value 1000 Value 2000
由于我想要tpsan
(“值1”/“值2”)的宽度而不是文本元素,我不能使用getBBox()
,因为该方法不适用到tspan
元素。
奇怪的是,使用jQuery的width()
方法会在Chrome中返回正确的值,但会在Firefox中返回NaN
。任何想法都将不胜感激。
答案 0 :(得分:8)
尝试多种解决方案后,我发现getComputedTextLength是获得svg tspan宽度的最准确方法。它也得到很好的支持,并且在不同的浏览器上表现相同。我还发现获得tspan高度的最佳方法就是读取font-size属性。
答案 1 :(得分:4)
您可以使用getBoundingClientRect()
查找tspan
的屏幕空间边界框。我已经测试过,发现它可以在Safari v5.0.4,Firefox 3.6和4.0RC以及Opera 11中运行。但是,fails with Chrome,v10.0.648.151和v11.0.696.14。 (它返回一个ClientRect,其所有值都设置为0
。)
您必须通过乘以屏幕变换矩阵的倒数将此客户空间矩形转换为SVG坐标。这是一个有效的例子:
http://phrogz.net/SVG/tspan_bounding_box.xhtml
将此配对offsetWidth
(适用于Chrome和Safari,但不适用于Firefox或Opera),您可以使用适用于所有支持SVG的浏览器的解决方案。