How to animate SVG rect to fill from bottom to top?

I’m working on an SVG here I want blue color fill from bottom to top I had tried using transform="rotate(-90)" but the problem is text also rotates. I newbie in an SVG can anyone suggest to me how to achieve this output. Any help will be appreciated!

svg {
  width: 200px;
}

rect {
  transition: height 0.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="slider1" type="range" min="0" max="100" step="25" value="25" oninput="document.querySelector(`#SVG${this.id} rect`).setAttribute('height',this.value+'%')" />

<svg id="SVGslider1" viewBox="0 0 28 6">
  <rect width="100%" height="25%" fill="blue" />
  <rect width="100%" height="100%" fill="none" stroke="black"/>
  <text x="5" y="5"  font-size="6" fill="green">text here</text>
</svg>

1 thought on “How to animate SVG rect to fill from bottom to top?”

Leave a Comment