Danil Gholtsman Danil Gholtsman - 4 months ago 12
Javascript Question

SVG text above rect strange layout

I try to make SVG text (wrapped in

<text>
of course) place on SVG
<rect>
.

And I want to make it look like text centered in my rect.

But strange thing I got there, it looks not like I assumed.

It looks like this

enter image description here

When I assumed it gonna be look like that

enter image description here

Whats wrong with that?

First I tought that equal
x
and
y
in
<text>
and
<rect>
will work, but it was like in picture below

enter image description here

I tought that
y="50%"
in text will force text to ancor somewhere in the middle. But I can achieve in only at
y="80%"
as you can see.

Original markup is here



<svg height="500" width="500" class="ng-scope">

<svg height="50" width="393.703125" y="0">

<g>
<rect x="0" y="0" height="50" width="393.703125" style="fill: #A8A8A8">
</rect>
<text font-family="Airal" font-size="45" x="0" y="50%" inline-size="200">
TEST TEXT IN SVG
</text>
</g>
</svg>

</svg>




Answer

The y property is per default applied to the text bottom line - so there is a difference between the y-position of a text and the y-position of lines, rectangles, or other shapes.

You can use the alignment-baseline property e.g. with middle to achieve better results. Here's the w3c description with many more options.

<svg height="500" width="500" class="ng-scope">

  <svg height="50" width="393.703125" y="0">

    <g>
      <rect x="0" y="0" height="50" width="393.703125" style="fill: #A8A8A8">
      </rect>
      <text font-family="Airal" font-size="45" x="0" y="50%" inline-size="200" alignment-baseline="middle">
        TEST TEXT IN SVG
      </text>
    </g>
  </svg>

</svg>