答案 0 :(得分：4)
发生这种情况的原因主要是因为您使用的是嵌套的<svg>元素。
如果未在x元素中指定y和<text>，则默认为（0,0）。这意味着文本的左下角位于每个<svg>元素的左上角。嵌套/子<svg>元素默认为overflow: hidden，因此每个文本元素都位于每个SVG的顶部。您所看到的只是几个像素，其中字形下降到基线以下。
您可以通过在您的孩子overflow="visible"元素上设置style="overflow: visible"或<svg>来验证这一点。文本将再次可见。除了第一个，因为它不在窗口的顶部。
http://jsfiddle.net/pn5sj8ge/5/
除非您有使用嵌套<svg>元素的特殊原因，否则不需要它。只需使用<text>元素。
答案 1 :(得分：0)
元素0,0及以上的文本。只需为文本元素指定y属性：
<svg width="100%" height="3900px">
<svg y="0" height="100px" width="100%">
<text y="50">calories</text>
</svg>
</svg>