Animating a SVG rectangle's height from the bottom to the top

Question

Animating a SVG rectangle's height from the bottom to the top

My SVG includes a clipPath with a rectangle inside it, which I want to transform into a fixed shape. However, when I try to change the height of the rectangle, it remains fixed at the top of the clipPath or SVG. I actually want it to stay at the bottom and have the ability to change the height from bottom to top.

Here is the snippet of the 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've been trying to animate the height in a CodePen example, which you can view here: CodePen Link Please refrain from suggesting the use of linearGradient, as I have multiple rectangles in the design. Also, using transform: scale won't achieve the desired effect as it will 'shrink' rather than 'cut'. Can anyone provide guidance on this issue?

html css animation svg

Answer 1

Answer №1

After considering, I have decided to utilize a path instead of a <rect> and incorporate animation for the d attribute in this manner:

The concept involves animating a value from 130 to 0 (in this scenario) and leveraging this value to update the d attribute of the path, similar to the following:

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>Upon observation, the animation is transitioning from top to bottom whereas I require the opposite effect. Additionally, it seems that the transform will not yield the desired outcome.</p>

Answer 2

After considering, I have decided to utilize a path instead of a <rect> and incorporate animation for the d attribute in this manner:

The concept involves animating a value from 130 to 0 (in this scenario) and leveraging this value to update the d attribute of the path, similar to the following:

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>Upon observation, the animation is transitioning from top to bottom whereas I require the opposite effect. Additionally, it seems that the transform will not yield the desired outcome.</p>

Animating a SVG rectangle's height from the bottom to the top

Answer №1

Similar questions

Tips for choosing Week Range values with Selenium WebDriver

Guide to dynamically altering the header logo as you scroll further

Incorporate a JSON file into the Webpack output separately from the bundle.js file

Tips for making an image resize automatically within a parent Grid container in Material UI

What is the best way to ensure a grid element has a column designated for each of its children?

Fluent Design System presents a CSS-exclusive Acrylic Material trend

Activating events with Jquery

Problems arise when attempting to use CSS content for double quotes

Is there a way to ensure that a CSS flex child occupies its own row exclusively?

Simple 3-column grid design in HTML and CSS

Make sure to use the jQuery load function to specifically target and retrieve

Adjust the height of the `<input type="file">` element to match the containing div by utilizing Bootstrap 4.5 styling

The Angular Material Theme is not being properly displayed on the mtx-datetimepicker component

What steps should I take to translate the design of Facebook's iOS homescreen into HTML and CSS?

When scrolling, the fixed menu bar at the top of the page is making the content below jump

An issue has been identified where a single image is not displaying properly on Android devices, as well as IE7 and

What is the best way to implement coding for portrait styles specifically on the Kindle Fire device?

Class name that changes the cursor to a pointer shape in CSS

Developing a slideshow with PHP and JQuery

`The select list is not responding to the change event being triggered`