html - Svg rect 从底部到顶部设置动画高度

Question

所以我在里面有 svg clipPath 和 rect，因为我只想转换固定形状内的那个矩形。我想改变那个 recangle 的高度，它工作得很好，但它固定在那个 clipPath 或 svg 的顶部，我想把它留在底部并 从底部到顶部改变高度。

这是 svg 代码:

<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>

我正在制作那个高度的动画并创建了 codepen，您可以在其中看到我的问题: codepen不要告诉我请使用 linerGradient，因为我那里有多个矩形。我不能使用 transform: scale，因为它会“收缩”它而不是“切割”它。你能帮帮我吗？

Answer 1

正如我所说，我会使用路径而不是 <rect>我会为 d 制作动画像这样的属性:

主要思想是将值从 130 动画化为 0(在本例中)并使用该值更新 d路径的属性，像这样:

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>