SVG文本元素沒有正確定位

我已經設置了一個簡約的例子，我有here。我需要將文本元素放置在SVG的最頂端。但是，如果你檢查文本元素，你會發現它實際上是在SVG之外的某個地方啓動的（例如Chrome上的-3px，FF上的-4px） - 請參見下面的截圖。我正在構建一些需要像素完美的東西，所以我需要讓文本從SVG開始的位置開始。正如你所看到的，rect從它應該的位置開始。SVG文本元素沒有正確定位

既然這麼不讓我帖子的鏈接，而無需代碼的jsfiddle了門柱內側，下面的代碼：

<svg width="100%" height="360" style="background-color: rgb(0, 249, 253);margin-top: 50px;"> 
    <rect y1="0" y2="100" x="0" width="100" height="100"></rect> 
    <text x="100" y="0" dominant-baseline="hanging">2022</text> 
</svg>

任何想法，爲什麼發生這種情況？

來源

2016-03-04 Eduard Luca

的空間是允許的口音。除了反覆試驗之外，沒有辦法解釋這一點。 –

按照SVG specification的hanging主導基線僅僅是印度文腳本像梵文有意義。如果你想在文本框的頂部邊緣與特定的Y座標對齊，然後使用text-before-edge代替：

<svg width="300" height="55" viewBox="0 0 300 55"> 
 
    <rect x="20" y="5" width="30" height="30" fill="#f00"/> 
 
    <text x="50" y="5" dominant-baseline="hanging">8888</text> 
 
    <text x="35" y="50" text-anchor="middle">hanging</text> 
 
    <rect x="220" y="5" width="30" height="30" fill="#f00"/> 
 
    <text x="250" y="5" dominant-baseline="text-before-edge">8888</text> 
 
    <text x="235" y="50" text-anchor="middle">text-before-edge</text> 
 
</svg>

來源

2016-03-04 19:45:04

奇怪的是，即使我完全刪除了「主導 - 基線」，它仍然奇怪地對齊（除了它在底部對齊）。那麼，既然你的解決方案正在工作，我不會再有任何疑問。謝謝。 –

SVG文本元素沒有正確定位

回答

相關問題