CODEWITHSUNDEEP
svg
vaso123
vaso123

Reputation: 12391

SVG position from x="0" y="0"

I try to write a text element in an SVG from x="50%" y="0".

My text is not appears and I don't know why.

Here is my SVG

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="900px" height="706" viewBox="0 0 900 706" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
    <text x="50%" y="0" text-anchor="middle" fill="#f00" text-anchor="middle" style="font-family: DINPro; font-size: 28px;">xxxx</text>
</svg>

I am not know the font-size it will be dynamically. If I am give y="20" then my text appears. But why is it?

As I read here, the 0 0 it the left top corner of the SVG.

Why is it? As you see, the the with and the height and the viewBox is the same.

Do I miss something?

Upvotes: 0

Views: 919

Answers (3)

Kevin
Kevin

Reputation: 516

Add an dominant-baseline attribute to your text element and set to hanging.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="900px" height="706" viewBox="0 0 900 706" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
    <text x="50%" y="0" fill="#f00" text-anchor="middle" style="font-family: DINPro; font-size: 28px;" dominant-baseline="hanging">xxxx</text>
</svg>

You have three options to change this:

dominant-baseline – used to determine or re-determine a scaled-baseline-table

alignment-baseline – specifies which baseline is to be aligned with the corresponding baseline of the parent

baseline-shift – allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent

See this post for more information about this: http://vanseodesign.com/web-design/svg-text-baseline-alignment/

Upvotes: 1

David Jacquel
David Jacquel

Reputation: 52829

On a text element, y is the element bottom position. In your case, the text printed outside of the viewbox.

Try to set your y to 20.

Upvotes: 0

Robert Longson
Robert Longson

Reputation: 124324

Per the SVG specification

The Y coordinate of the bottom of a roman capital letter is usually zero. And the descenders on lowercase roman letters have negative coordinate values.

Upvotes: 0

Related Questions