HTML5 - 如何獲取SVG文本元素的中心點？

我遇到了SVG文本元素的問題。我想找到SVG文本的中心點。在HTML文件中：HTML5 - 如何獲取SVG文本元素的中心點？

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <text x="300" y="300" style="font-size: 80px;" id="test">It is example text</text> 
</svg>

在Javascript中我有類似的東西：

var obj = document.getElementById('test').childNodes[1]; 
var box = obj.getBBox(); 

var centerPoint = new Object(); 
centerPoint.x = box.x + box.width/2; 
centerPoint.y = box.y + box.height/ 2;

，但它不工作 - 中心點比我預期的要低。可能我錯過了一些東西，我確定還有一個文本屬性必須從「centerPoint.y」中減去。「centerPoint.x」值似乎沒問題。它在IE9瀏覽器，Chrome，Opera和Firefox上進行檢查。結果是一樣的。

或者你有其他解決方案？

編輯

總結起來我的代碼工作正常。我重寫了整個代碼，現在沒問題。我不知道發生了什麼，可能我的瀏覽器根本沒有刷新腳本。將行高設置爲「0」是不必要的。 getBBox這是我需要做的一切。

無論如何感謝您的時間和對我的英語感到抱歉！ :)

來源

2012-09-03 Pat Ko

伸可能會影響到整體定位。看看你是否可以在盒子周圍繪製一個矩形 - 這會向你展示更多關於正在發生的事情。 – Randy

行高可能是一個原因。文本通常位置高於其中心位置/

來源

2012-09-03 14:25:43

在chrome中，naturalHeight和naturalWidth似乎正確地獲得了高度和寬度。試試看看它們是否適合你？

var centrePoint = { 
    x: obj.naturalWidth/2, 
    y: obj.naturalHeight/2 
}

從我SVG元素的豐富經驗，是的，他們有時會在其周圍填充像行高的怪異位，所以設置line-height:0可以提供幫助。

此外，由getBBox()返回的對象實際上並不是像素。它與包含SVG元素的viewbox相關 - 這不一定是像素。 SVG s在我的網站上可能有一個viewbox 500乘500，但樣式只有25px乘25px。所以它可能與像素有很大不同。

來源

2012-09-03 14:35:15

不好，檢查結果 http://s15.postimage.org/9jaucdj15/wtf.png –

對不起，我的錯。如果我們使用getBoudingClientRect或getBBox，結果是一樣的。立即檢查：http://s17.postimage.org/srm8ge2al/newone.png 但我不認爲這是文本的中心點:( –

我更新了答案 - 嘗試'naturalHeight'等。我知道他們是否工作？ –

如果您正在尋找更緊密的邊界框，那麼您可以遍歷文本元素中的字符添加使您自己更緊密的邊界框，請參閱getExtentOfChar DOM方法。但是請注意，如果您有很多文字，這可能會很昂貴。

來源

2012-09-03 14:56:22

並非所有的字形都是相同的高度。考慮「乾草」這個詞h比a更高，y下降到h和a之下（y有一個叫下降的東西）。當你在SVG中獲得文本的邊界框時，它會給出字形單元格的大小。這通常足以容納上行者即h和下行者即y個字符。這就是SVG規範所說的那樣做，這就是爲什麼所有瀏覽器都是一樣的。

來源

2012-09-03 15:26:10

可以替代使用getBoundingClientRect()的getBBox()

var obj = document.getElementById('test').childNodes[1]; 
var box = obj.getBoundingClientRect(); 
var centerPointX = box.left + box.width/2; 
var centerPointY = box.top + box.height/ 2;

來源

2017-06-09 06:37:08

HTML5 - 如何獲取SVG文本元素的中心點？

回答

相關問題