svg - 看不到 SVG 文本

Question

我对<svg>缺乏基本的了解和 <text>内。

我希望看到 39 个 svg 子元素，100 像素高，每个子元素中都有清晰的文本。

http://jsfiddle.net/pn5sj8ge/

Answer 1

发生这种情况的原因主要是因为您正在使用嵌套 <svg>元素。

当您未指定 x 时和 y在你的<text>元素，它们默认为 (0,0)。这意味着文本的左下角位于每个 <svg> 的左上角。元素。嵌套/子级 <svg>元素默认为 overflow: hidden , 因此每个文本元素都位于每个 SVG 的顶部。您所看到的只是字形低于基线的几个像素。

您可以通过设置 overflow="visible" 来验证这一点或 style="overflow: visible"在你的 child 身上<svg>元素。文本将再次可见。好吧，除了第一个，因为它不在窗口的顶部。

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

除非您有特殊原因使用嵌套 <svg>元素，没有必要。只需使用 <text>元素。