SVG-Text über Rect seltsames Layout

Question

Ich versuche, SVG-Text (in <text> natürlich verpackt) auf SVG <rect> platzieren.

Und ich möchte es aussehen wie Text in meiner Mitte zentriert.

Aber seltsame Sache, die ich dort bekam, sieht es nicht so aus, wie ich angenommen habe.

Es sieht aus wie dieses

Als ich es wird, wie die

aussehen wird angenommen

Was daran falsch?

Erste tought ich, dass gleich x und y in <text> und <rect> wird funktionieren, aber es war wie in Bild unten

ich tought dass y="50%" in Text Text zwingen, irgendwo in der Mitte ANCOR . Aber ich kann nur bei y="80%" erreichen, wie Sie sehen können.

Original-Markup ist hier

<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 1

Die y Eigenschaft standardmäßig ist auf den Text Unterm Strich angewendet - so gibt es einen Unterschied zwischen der y-Position eines Textes und die Y-Position von Linien, Rechtecken oder anderen Formen.

Sie können die alignment-baseline-Eigenschaft verwenden, z. mit middle um bessere Ergebnisse zu erzielen. Here's the w3c description mit vielen weiteren Optionen.

<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>

Answer 2

viewBox hinzufügen. Wieder bin ich kein Experte in Svg, habe nur etwas Arbeit getan, aber das kann funktionieren.

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

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

 
    <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>