看不到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/