Question

所以我有svg clipPath并在里面矩形化，因为我只想变形固定形状内的那个矩形。而且我想更改该矩形的高度，效果很好，但是固定在该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 而且不要告诉我请使用线性渐变，因为那里有多个矩形。我不能使用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>

从底部到顶部的SVG矩形动画高度

1 个答案: