发生这种情况的原因主要是因为您使用了嵌套<svg>元素。
当您未在元素中指定xandy时<text>，它们默认为 (0,0)。这意味着文本的左下角位于每个<svg>元素的左上角。嵌套/子<svg>元素默认为overflow: hidden，因此每个文本元素都位于每个 SVG 的顶部。您所看到的只是字形低于基线的几个像素。
您可以通过设置overflow="visible"或style="overflow: visible"在您的子<svg>元素上验证这一点。文本将再次可见。好吧，除了第一个，因为它不在窗口的顶部。
http://jsfiddle.net/pn5sj8ge/5/
除非您有使用嵌套<svg>元素的特殊原因，否则没有必要。只需使用<text>元素。