Keep <text> Element skaliert innerhalb <svg> mit ViewBox

Question

Ich versuche, einige Text als Beschriftungen in einigen skalierten Elementen zu setzen, und der Text ist zu groß, um in den Container zu passen. Was kann ich hier machen?

<div class="t_container"> 
    <div class="t_x" style="position: relative;"> 
    <svg position="absolute" viewBox="0 0 6 1" preserveAspectRatio="none"> 
     <g> 
     <rect x="0" y="0" width="1" height="0.4"><title>Nov-21</title></rect> 
     <text x="0.5" y="0.5" fill="red">A<text> 
     </g> 
    <rect x="1" y="0" width="1" height="1"><title>Nov-22</title></rect> 
    <rect x="2" y="0" width="1" height="1"><title>Nov-23</title></rect>  
    <rect x="3" y="0" width="1" height="1"><title>Nov-24</title></rect> 
    <rect x="4" y="0" width="1" height="1"><title>Nov-25</title></rect>  
    <rect x="5" y="0" width="1" height="1"><title>Nov-26</title></rect></svg> 
</div> 

Hier ist a codepen mit dem Ergebnis.

Answer 1

Sie haben eine sehr kleine benutzerdefinierte viewport="0 0 6 1" Größe. 6px - Breite, 1px - Höhe, damit die Schrift nicht mit solchen Parametern angezeigt werden kann.

I erhöht die Größe der viewBox 100 mal viewBox="0 0 600 100"

Squares für Klarheit in verschiedenen Farben lackiert. Sie können ihre Färbung nach Ihrer Wahl ändern.

Der Text wird innerhalb der Quadrate platziert. Ich hoffe, das ist genau das, was Sie wollten, als Sie den Befehl innerhalb der Quadrate

<title> Nov-24 </ title> verwendeten.

Aber der Befehl <title> in SVG ist ein System-Tooltip, dessen Informationen angezeigt werden, wenn Sie den Cursor bewegen. Die Größe des Tooltip und seine Schriftart kann nicht geändert werden, so fügte ich in die Quadrate mehr Tags <text> ... </ text>, deren Parameter Sie ändern können.

<div class="t_container"> 
 
    <div class="t_x" style="position: relative;"> 
 
    <svg position="absolute" viewBox="0 0 600 100" > 
 
    <g> 
 
     <rect x="0" y="0" width="100" height="40"><title>Nov-21</title></rect> 
 
     <text x="35" y="75" font-size="36" fill="red">A</text> 
 
     </g> 
 
    <rect x="100" y="0" width="100" height="100" fill="orange"> 
 
\t <title>Nov-22</title></rect> 
 
\t <text x="125" y="55" font-size="18" fill="white">Nov-22</text> 
 

 
\t <rect x="200" y="0" width="100" height="100" fill="orangered"> 
 
\t <title>Nov-23</title></rect>  
 
\t <text x="225" y="55" font-size="18" fill="white">Nov-23</text> 
 
\t 
 
\t 
 
    <rect x="300" y="0" width="100" height="100" fill="green"> 
 
\t <title>Nov-24</title></rect> 
 
\t <text x="325" y="55" font-size="18" fill="white">Nov-24</text> 
 
\t 
 
    <rect x="400" y="0" width="100" height="100" fill="dodgerblue"> 
 
\t <title>Nov-25</title></rect>  
 
    <text x="425" y="55" font-size="18" fill="white">Nov-25</text> 
 
\t 
 
    <rect x="500" y="0" width="100" height="100" fill="yellowgreen"> 
 
\t <title>Nov-26</title></rect> 
 
\t <text x="525" y="55" font-size="18" fill="white">Nov-26</text> 
 
\t 
 
\t 
 
\t </svg> 
 
</div>