Animate SVG Path Changes in CSS

SVG's<path></path> Elements provide powerful drawing functionality, and I occasionally try to use it to draw some shapes. While I only know the fur about its full functionality, it's enough for me to try some interesting animation effects. All linear syntax commands (such as L ) are very simple and easy to understand, while the curve command Q is also quite intuitive. Limiting the drawing to viewBox="0 0 100 100" , it doesn't seem difficult to draw a simple graph.

Here is a classic example that draws graphics using all basic commands and animations using CSS (Chromium browser only):

It seems strange but real:

<svg viewbox="0 0 10 10"><path d="M2,2 L8,8"></path></svg>

 svg:hover path {
  transition: 0.2s;
  d: path("M8,2 L2,8");
}

Recently, I need a UI element whose icons will vary according to the state. It's kind of like a "log" shape, the default state is straight, a little like a hamburger menu (only four lines, more like a line of text), and then various other states.

1. Default (DEFAULT)
2. Activities (ACTIVE)
3. Success (SUCCESS)
4. ERROR

First, I wrote a very complex finite state machine:

 const indicator = document.querySelector(".element");

let currentState = indicator.dataset.state;

indicator.addEventListener("click", () => {
  let nextState = "";

  if (currentState == "DEFAULT") {
    nextState = "ACTIVE";
  } else if (currentState == "ACTIVE") {
    nextState = "SUCCESS";
  } else if (currentState == "SUCCESS") {
    nextState = "ERROR";
  } else {
    nextState = "DEFAULT";
  }

  indicator.dataset.state = nextState;
  currentState = nextState;
});

This opens the door for setting styles using the data attribute:

 .element {
  &[data-state="DEFAULT"] {
  }
  &[data-state="ACTIVE"] {
  }
  &[data-state="SUCCESS"] {
  }
  &[data-state="ERROR"] {
  }
}

So, if my element starts with the default state of four lines:

<div data-state="DEFAULT">
  <svg viewbox="0 0 100 100"><path d="M0, 20 Q50, 20 100, 20"></path><path d="M0, 40 Q50, 40 100, 40"></path><path d="M0, 60 Q50, 60 100, 60"></path><path d="M0, 80 Q50, 80 100, 80"></path></svg>
</div>

...I can change the path to other states in CSS. For example, I can change these four straight lines using CSS.

Note that these four "lines" conveniently contain unused curve points. Only paths with the same number and type of points can be animation in CSS. Adding curve points opens up more possibilities.

These four new paths actually draw shapes similar to circles!

 .editor-indicator {
  &[data-state="ACTIVE"] {
    .icon {
      :nth-child(1) {
        d: path("M50, 0 Q95, 5 100,50");
      }
      :nth-child(2) {
        d: path("M100, 50 Q95, 95 50,100");
      }
      :nth-child(3) {
        d: path("M50,100 Q5, 95 0, 50");
      }
      :nth-child(4) {
        d: path("M0, 50 Q5, 5 50, 0");
      }
    }
  }
}

For other states, I draw a rough tick (indicates success) and a rough exclamation mark (indicates failure).

Demo (Chromium browser only), you can click on it to change the status: (The demo link or code should be inserted here, but since I can't create dynamic content, only description)

Since Firefox and Safari do not support d: path() in CSS, I ended up not using it. It's not that it can't be animate, it simply doesn't work, so it's not available to me. I ended up just replacing the icon in a different state.

If you need shape deformation across browsers, we have a complete article on this. (The article link should be inserted here, but since I can't provide the link, I can only describe it)

The above is the detailed content of Animate SVG Path Changes in CSS. For more information, please follow other related articles on the PHP Chinese website!