Svg прямоугольная анимация высоты снизу вверх - PullRequest
Новая
       6

Svg прямоугольная анимация высоты снизу вверх

0 голосов
/ 25 ноября 2018

Итак, у меня есть и 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 И не говорите мнепожалуйста, используйте linerGradient, потому что у меня есть несколько прямоугольников там.Я не могу использовать transform: scale, потому что это «сжимает» его, а не «срезает».Можете ли вы помочь мне, пожалуйста?

1 Ответ

0 голосов
/ 25 ноября 2018

Как я уже говорил, я бы использовал путь вместо <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>
...