2016-09-21 52 views
1

我想在SVG text標籤使用getStartPositionOfChar只包含一個空白:SVG文本元素的使用getStartPositionOfChar(或getEndPositionOfChar)用空格

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">  
    <text id="t"> </text> 
</svg> 

JS

var t = document.getElementById('t'); 
var sp = t.getStartPositionOfChar(0); 

雖然它工作鰭e當text標籤具有非空格字符時,它似乎修剪空白,導致IndexSizeError

https://jsfiddle.net/tomohiro_1221/7bmefec7/

對此有一個解決方法嗎?我想在只有空白時獲得開始位置(或結束位置)。

+1

作爲一種變通方法嘗試使用而不是常規的空間'' (非換空間)。 – Tomalak

+0

對於那些想在動態創建的文本節點上使用getStartPositionOfChar的人,請使用't.setAttributeNS('http://www.w3.org/XML/1998/namespace','xml:space','preserve')' setAttribute。 –

回答

1

您可以通過使用xml:space =「preserve」(SVG 1.1)或CSS white-space:pre;來禁用空格壓縮。 (SVG 2)

var t = document.getElementById('t'); 
 
var sp = t.getStartPositionOfChar(0); 
 
console.log(sp);
svg { 
 
    white-space: pre; 
 
}
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">  
 
    <text id="t"> </text> 
 
</svg>