SVG 占用了额外的空间，并且边距不适用于文本元素

Question

I have the following SVG code:

<svg width="100%" height="100px">
  <text x="50%" y="60%" text-anchor="middle" style="">Name</text>
</svg>

This gives the following result. Too much extra space below the name. No matter what I try I cannot reduce it. Setting custom height cuts the name from the top.

If I change the height the Name gets cut from the top and margin is not working on text element.

<svg width="100%" height="40px">
  <text x="50%" y="60%" text-anchor="middle" style="margin-top: 10px;">Name</text>
</svg>

What is the issue?

Answer 1

You may try the dy property of the text element.

<svg width="100%" height="100px" >
  <text x="50%" y="60%" text-anchor="middle" dy="10px">Name</text>
</svg>