我应该使用什么来在React OR Javascript中显示实时图标？ 像杯子里装了多少咖啡？

Question

I want to create dashboard with lots of live icons. Live icons means icons content will change dynamically.

For example:- Let say i have an icon of a coffee cup, based upon number of coffee sold the coffee level in cup goes up.

I tried solving it using SVG & CSS . Below is the live code-sandbox DEMO example. (same code I am posting below) https://codesandbox.io/s/fill-coffee-to-svg-1sfb0 what exactly I am doing is on top of SVG component i using div node and applying css on the div tag.

Issue is that, It is very difficult to manage path/points dynamically in SVG, also for different screen version it will be difficult.

Can anyone suggest any better approach for this.

import ReactDOM from "react-dom";
import React, { Component } from "react";

class Todo extends Component {
  state = { height: 4 };

  setHeight = (e, fillType) => {
    e.preventDefault();
    console.log(this.state.height);
    if (this.state.height < 100) {
      if (fillType === "fill") {
        this.setState({
          height: this.state.height + 2
        });
      }
    }
    if (this.state.height >= 2) {
      if (fillType === "drink") {
        this.setState({
          height: this.state.height - 2
        });
      }
    }
  };
  render() {
    return (
      <div>
        <svg width="255" height="224" xmlns="http://www.w3.org/2000/svg">
          <g>
            <rect
              fill="#fff"
              id="canvas_background"
              height="226"
              width="257"
              y="-1"
              x="-1"
            />
            <g
              display="none"
              overflow="visible"
              y="0"
              x="0"
              height="100%"
              width="100%"
              id="canvasGrid"
            >
              <rect
                fill="url(#gridpattern)"
                stroke-width="0"
                y="0"
                x="0"
                height="100%"
                width="100%"
              />
            </g>
          </g>
          <g>
            <title>Layer 1</title>
            <path
              stroke="#000"
              id="svg_1"
              d="m78.82963,176.75921l97.93778,0c14.11708,-0.03733 23.74788,-17.00704 23.70086,-34.46505l0,-11.73873c27.94999,-0.03136 48.22814,-30.02253 48.21769,-64.99381c0.01045,-35.59398 -19.86965,-64.83701 -43.00946,-64.81162l-150.95938,0l0,141.54714c0.02194,19.22158 11.60543,34.42772 24.1125,34.46207zm121.63551,-149.38391l0,0l5.20823,0c19.14875,-0.04331 25.29102,25.83983 25.19908,38.38045c0.01881,20.24897 -10.47393,39.66916 -30.40731,37.78463l0,-76.16508zm-199.71514,158.00316c0.01776,26.16387 13.9729,38.29683 25.20535,38.37149l202.59351,0c13.39827,-0.07466 25.14161,-15.13147 25.20117,-38.37149l-253.00002,0z"
              stroke-width="1.5"
              fill="#fff"
            />
          </g>
        </svg>
        <div
          style={{
            position: "absolute",
            left: "63px",
            top: "9px",
            height: "175px",
            width: "145px",

            borderBottomLeftRadius: "25px",
            borderBottomRightRadius: "25px",
            overflow: "auto"
          }}
        >
          <div
            style={{
              height: this.state.height + "%",
              width: "100%",
              position: "absolute",
              bottom: "0",
              zIndex: 1000,
              background: "green",
              transition: "all .4s"
            }}
          />
        </div>
        <button onClick={e => this.setHeight(e, "fill")}>
          fill more cofee +
        </button>
        <button onClick={e => this.setHeight(e, "drink")}>drink cofee -</button>
      </div>
    );
  }
}

ReactDOM.render(<Todo />, document.getElementById("root"));

Answer 1

Have you tried using the react-spring library?

In the basics section of react-spring documentation (can be found here - https://www.react-spring.io/docs/hooks/basics ) this code snippet is given:

const props = useSpring({ x: 100, from: { x: 0 } })
return (
  <animated.svg strokeDashoffset={props.x}>
    <path d="..." />
  </animated.svg>
)

Using your example of your coffee mug, if you would render your mug separate to the coffee filling the mug, with the coffee stroke being upwards, then you could use this technique to animate the coffee height.

Edit:

As you are using a class component you will want to use the render props API for this - https://www.react-spring.io/docs/props/spring

<Spring
  from={{ x: 100 }}
  to={{ x: 0 }}>
  {props => (
    <svg strokeDashoffset={props.x}>
      <path d="..." />
    </svg>
  )}
</Spring>