如何使用rect和text旋转g标签内的文本

Question

  [<g>
              <rect width="1px" height="0.5px" style={{ fill: "#1732F8" }} x="24" y="6" />
              <rect width="1px" height="0.5px" style={{ fill: "#265BF9" }} x="24" y="6.5" />
              <rect width="1px" height="0.5px" style={{ fill: "#3785F9" }} x="24" y="7" />
              <rect width="1px" height="0.5px" style={{ fill: "#47AFFA" }} x="24" y="7.5" />
              <g>
                <rect width="1px" height="0.5px" style={{ fill: "#59DBFB" }} x="24" y="8" />
                <text x="25" y="8.5" fontSize="0.5px">{`~ ${percentage25}`}</text>
              </g>
              <rect width="1px" height="0.5px" style={{ fill: "#65FBF2" }} x="24" y="8.5" />
              <rect width="1px" height="0.5px" style={{ fill: "#65FAC8" }} x="24" y="9" />
              <rect width="1px" height="0.5px" style={{ fill: "#65FA9D" }} x="24" y="9.5" />
              <rect width="1px" height="0.5px" style={{ fill: "#64F94D" }} x="24" y="10" />
              <g>
                <rect width="1px" height="0.5px" style={{ fill: "#67F925" }} x="24" y="10.5" />
                <text x="25" y="11" fontSize="0.5px">{`~ ${percentage50}`}</text>
              </g>
              <rect width="1px" height="0.5px" style={{ fill: "#78FA26" }} x="24" y="11" />
              <rect width="1px" height="0.5px" style={{ fill: "#B0FB2A" }} x="24" y="11.5" />
              <rect width="1px" height="0.5px" style={{ fill: "#D2FC2C" }} x="24" y="12" />
              <rect width="1px" height="0.5px" style={{ fill: "#F5FD2F" }} x="24" y="12.5" />
              <g>
                <rect width="1px" height="0.5px" style={{ fill: "#F8DE2C" }} x="24" y="13" />
                <text x="25" y="13.5" fontSize="0.5px">{`~ ${percentage75}`}</text>
              </g>
              <rect width="1px" height="0.5px" style={{ fill: "#F1B227" }} x="24" y="13.5" />
              <rect width="1px" height="0.5px" style={{ fill: "#EC8923" }} x="24" y="14" />
              <rect width="1px" height="0.5px" style={{ fill: "#E7601F" }} x="24" y="14.5" />
              <rect width="1px" height="0.5px" style={{ fill: "#E43A1C" }} x="24" y="15" />
              <g>
                <rect width="1px" height="0.5px" style={{ fill: "#E3231B" }} x="24" y="15.5" />
                <text x="25" y="16" fontSize="0.5px">{percentage100}</text>
              </g>
            </g>][1]

percentage25的值为4，percent50的值为9，但是在输出中，我得到的水图像为4和9 snd，依此类推。我需要4和9的实际方向[在此处输入图像描述] [1]

任何人都可以通过svg的g标签内的rect和text行为来帮助我。

谢谢。

这是输出链接[1]：https://i.stack.imgur.com/TZAFX.png