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>

2 thoughts on “How to animate SVG rect to fill from bottom to top?”

  1. Instead of animating the width you can animate the height and to make it fill from bottom to top you can rotate the rect upside around its center:

    svg {
      width: 200px;
    }
    
    rect {
      transition: height 0.5s;
      transform-origin: center center;
    }
    <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" transform="rotate(180)" />
      <rect width="100%" height="100%" fill="none" stroke="black"/>
      <text x="5" y="5"  font-size="6" fill="green">text here</text>
    </svg>
    Reply
  2. The shortest answer would be to update your CSS with rect {transform: transform: rotate(180deg); transform-origin: center center;} to rotate it 180ยบ, pinned to the SVG center.

    Alternatively, rebuild the SVG with a white rect overlaid on blue and the slider javascript targets the white rectangle.

    svg {
      width: 200px;
    }
    
    rect {
      transform: rotate(180deg);
      transform-origin: center center;
      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>
    Reply

Leave a Comment