看不到SVG文本

Question

我對<svg>和<text>缺乏基本的瞭解。

我期望看到39個svg子元素，100px高，每個元素都有清晰的文字。

http://jsfiddle.net/pn5sj8ge/

Answer 1

出現這種情況的原因主要是因爲你使用嵌套<svg>元素。

當您在<text>元素中未指定x和y時，它們默認爲（0,0）。這意味着文本的左下角位於每個<svg>元素的左上角。嵌套/子元素<svg>元素默認爲overflow: hidden，因此每個文本元素都不在每個SVG的頂部。您所看到的只是幾個像素，其中的字形降​​至基線以下。

您可以通過在子女<svg>元素上設置overflow="visible"或style="overflow: visible"來驗證此情況。文字將再次顯示。除了第一個，因爲它不在窗口的頂部。

http://jsfiddle.net/pn5sj8ge/5/

除非你有使用嵌套<svg>元素有特殊原因，沒有必要爲它。只需使用<text>元素。

Answer 2

文本在0，0及以上的元素。只要給文本元素y屬性：

<svg width="100%" height="3900px"> 
    <svg y="0" height="100px" width="100%"> 
     <text y="50">calories</text> 
    </svg> 
</svg> 

http://jsfiddle.net/pn5sj8ge/4/