Как повернуть текст внутри тега g с помощью прямоугольника и текста - PullRequest
Новая
       52

Как повернуть текст внутри тега g с помощью прямоугольника и текста

0 голосов
/ 09 ноября 2018 
  [<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]

процент 25 имеет значение 4, а процент 50 имеет значение 9, но на выходе я получаю изображение воды 4 и 9 и так далее.Мне нужна фактическая ориентация 4 и 9 [введите описание изображения здесь] [1]

Может кто-нибудь помочь мне с этим поведением прямоугольника и текста внутри тега g svg.

Спасибозаранее.

это выходная ссылка [1]: https://i.stack.imgur.com/TZAFX.png

...