Reputation: 12391
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
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
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
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