<text>要素を内部にスケーリング<svg> viewBoxで

Question

いくつかの拡大縮小要素内にテキストとしてラベルを挿入しようとしていますが、テキストが大きすぎてコンテナに収まらない。私はここで何ができますか？

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

ここにはa codepenがあります。

Answer 1

サイズが非常に小さいので、サイズはviewport="0 0 6 1"です。 6px - 幅、1px - 高さのため、このようなパラメータでフォントを表示することはできません。

私は別の色で塗られ、明確にするためにビューボックス100回viewBox="0 0 600 100"

正方形のサイズを増加させました。あなたの選択に応じて色を変えることができます。

テキストは四角の内側に配置されます。コマンドを使用したときに望んだのとまったく同じだと思います。

<title> Nov-24 </ title>四角の内側にあります。

しかし、SVGのコマンド<title>は、システムのツールチップで、カーソルを置いたときの情報が表示されます。 ツールチップのサイズとそのフォントを変更することはできませんので、より多くのタグ<text> ... </ text>を四角形に追加しました。パラメータは変更可能です。

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