Svg rect animate height from bottom to top

Question

So I have and svg clipPath and rect inside, because I want to transfom only that rectangle inside fixed shape. And I want to change height of that recangle, it works nice, but it's fixed to top of that clipPath or svg and I want to stay it at bottom and change height from bottom to top.

This is that svg code:

<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 505 162.7" style="enable-background:new 0 0 505 162.7;" xml:space="preserve" class="go">
  <style type="text/css">
    .D{clip-path:url(#Dobrys_1_);}

    .fill3 {
      fill:#4E7DBF;
    }
  </style>
  <g id="D">
    <defs>
      <path id="Dobrys" d="M75,111.9c-8.5,8.8-19,13.2-31.2,13.2c-12,0-22.4-4.3-30.9-12.8C4.3,103.7,0,93.4,0,81.3
                           c0-12.1,4.3-22.4,12.9-30.9c8.6-8.6,18.9-12.8,31-12.8c12.3,0,22.7,4.4,31.3,13.2V6.3c0-4.2,2.1-6.3,6.2-6.3
                           c4.2,0,6.2,2.1,6.2,6.3v112.5c0,4.2-2.1,6.3-6.3,6.3c-3.2,0-5.2-1.5-5.9-4.6C75.1,119.2,75,116.4,75,111.9z M75.1,81.3
                           c0-8.6-3.1-15.9-9.2-22.1C59.8,53.1,52.4,50,43.8,50c-8.6,0-16,3.1-22.1,9.2c-6.1,6.1-9.2,13.5-9.2,22.1c0,8.6,3.1,16,9.2,22.1
                           c6.1,6.1,13.5,9.2,22.1,9.2c8.6,0,16-3.1,22.1-9.2C72,97.3,75.1,89.9,75.1,81.3z">
      </path>
    </defs>
    <clipPath id="Dobrys_1_">
      <use xlink:href="#Dobrys" style="overflow:visible;"></use>
    </clipPath>
    <rect id="D3" x="0" y="0" class="D fill3" width="90.7" data-height="125.3"></rect>
  </g>
</svg>

I'm animating that height and I created codepen, where you can see my problem: codepen And don't tell me please to use linerGradient, because I have multiple rectangles there. I can't use transform: scale, because it will 'shrink' it and not 'cut' it. Can you help me please?

Your code is working only in Chrome. Normally you can't change the value of `height` in CSS. As for the solution to your problem: I would use a path like this: `` and in Javascript I would animate the `d` attribute from d="M0,125H90.7V**125**H0z" to d="M0,125H90.7V**0**H0z" — enxaneta, Nov 25 '18 at 15:45
@enxaneta it works! I updated that codepen with working example. You can post it as aswer and I'll accept it if you want. — SenTisso, Nov 25 '18 at 15:56
And how can I modify x and y positioning, when I use translate it's just not visible on the place it should be. — SenTisso, Nov 25 '18 at 16:22
Thank you, however this is not what I meant. If you animate it like this it will work only in Chrome. Please take a look at my answer below. — enxaneta, Nov 25 '18 at 18:39

score 2 · Accepted Answer · answered Nov 25 '18 at 18:43

As I've commented I would use a path instead of a <rect> and I would animate the d attribute like this:

The main idea is to animate a value from 130 to 0 (in this case) and use this value to update the d attribute of the path, something like this:

D.setAttributeNS(null, "d", `M0,125.3H90.7V${value}H0z`);

let rid = null;

let memory = [0, 130];
let target = memory[0];
let value = memory[1];



function updateValue() {
  let dist = target - value;
  let vel = dist / 10;
  value += vel;
  //improvement
  if (Math.abs(dist) < 0.01) {
    if (rid) {
      window.cancelAnimationFrame(rid);
      rid = null;
    }
  }
}

function updatePath() {
  D.setAttributeNS(null, "d", `M0,125.3H90.7V${value}H0z`);
}

function Frame() {
  rid = window.requestAnimationFrame(Frame);
  updateValue();
  updatePath();
}

HB.addEventListener(
  "click",
  function() {
    if (rid) {
      window.cancelAnimationFrame(rid);
      rid = null;
    }

    memory.reverse();
    target = memory[1];
    Frame();
  },
  false
);

#logo {
  width: 200px;
}

svg{border:1px solid;}

<svg viewBox="0 0 100 162.7" id="logo" class="go">
  <style type="text/css">
   .D{clip-path:url(#Dobrys_1_);}

    .fill3 {
      fill:#4E7DBF;
    }
  </style>
  <defs>
      <path id="Dobrys" d="M75,111.9c-8.5,8.8-19,13.2-31.2,13.2c-12,0-22.4-4.3-30.9-12.8C4.3,103.7,0,93.4,0,81.3
                           c0-12.1,4.3-22.4,12.9-30.9c8.6-8.6,18.9-12.8,31-12.8c12.3,0,22.7,4.4,31.3,13.2V6.3c0-4.2,2.1-6.3,6.2-6.3
                           c4.2,0,6.2,2.1,6.2,6.3v112.5c0,4.2-2.1,6.3-6.3,6.3c-3.2,0-5.2-1.5-5.9-4.6C75.1,119.2,75,116.4,75,111.9z M75.1,81.3
                           c0-8.6-3.1-15.9-9.2-22.1C59.8,53.1,52.4,50,43.8,50c-8.6,0-16,3.1-22.1,9.2c-6.1,6.1-9.2,13.5-9.2,22.1c0,8.6,3.1,16,9.2,22.1
                           c6.1,6.1,13.5,9.2,22.1,9.2c8.6,0,16-3.1,22.1-9.2C72,97.3,75.1,89.9,75.1,81.3z">
      </path>
    <clipPath id="Dobrys_1_">
      <use xlink:href="#Dobrys" ></use>
    </clipPath>
    </defs>
  

    <path id="D" x="50" y="50" id="D3" class="D fill3" d="M0,125.3H90.7V125H0z" />

</svg>

<button class="height" id="HB">change height</button>
<button class="scaleBtn">apply scale</button>
<p>As you can see, it's (coming) from top to bottom and I need it the other way. And as you can see again, that transform is not going to create same effect.</p>

Actually I didn't notice that it doesn't work in other browsers, thank you for pointing it out. I'll try your method when I'll get home. — SenTisso, Nov 25 '18 at 18:57
And by the way, it's possible by doing it like this https://stackoverflow.com/a/16305817/9421094 tbh I'm not sure if it is possible, I can't test it, cause I'm on my phone now, but I hope it's possible. — SenTisso, Nov 25 '18 at 18:59

Svg rect animate height from bottom to top

1 Answers1