CODEWITHSUNDEEP
svg
Skylar Saveland
Skylar Saveland

Reputation: 11434

Can't see SVG text

I lack a basic understanding of <svg> and <text> within.

I would expect to see 39 svg sub-elements, 100px tall, with legible text in each.

http://jsfiddle.net/pn5sj8ge/

Upvotes: 3

Views: 3439

Answers (2)

Skylar Saveland
Skylar Saveland

Reputation: 11434

The text at 0, 0 and above the elements. Just give the text elements a y attribute:

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

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

Upvotes: 1

Paul LeBeau
Paul LeBeau

Reputation: 101800

The reason this is happening is mainly because you are using nested <svg> elements.

When you don't specify an x and y in your <text> elements, they default to (0,0). This means that the bottom-left of your text is at the top-left of each <svg> element. Nested/child <svg> elements default to overflow: hidden, so each text element is off the top of each SVG. All you are seeing is a few pixels where the glyphs drop below the baseline.

You can verify this by setting overflow="visible" or style="overflow: visible" on your child <svg> elements. The text will become visible again. Well all except the first one because it is off the top of the window.

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

Unless you have a special reason for using nested <svg> elements, there is no need for it. Just use <text> elements.

Upvotes: 6

Related Questions