React/JavaScript实时动态图标实现方案咨询（咖啡杯填充示例）

I want to create a dashboard with lots of real-time dynamic icons, where the content of the icons can change dynamically. For example, the coffee cup icon needs to change the fill height of the coffee inside based on the number of coffees sold. I tried to implement this using SVG and CSS, here's my code:

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"));

My specific implementation is overlaying a div node above the SVG component and controlling this div via CSS. However, I currently face issues with difficult SVG path/point dynamic management and poor adaptation to different screens. I hope someone can provide a better implementation solution.

Hey there! Your current overlay approach gets the job done, but those positioning and scaling headaches are totally understandable. Let's switch to SVG-native methods that eliminate those problems entirely—they're more maintainable and scale perfectly with your SVG.

Option 1: Clip Path + Dynamic Rectangle Fill #

This is the most straightforward fix. We'll define a clip path that matches the coffee cup's inner area, then use a rectangle inside that clip path to represent the coffee. By adjusting the rectangle's height (or vertical position) with state, we get smooth, dynamic filling without any external divs.

Modified React Code #

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

class CoffeeCup extends Component {
  state = { fillPercentage: 4 };

  adjustFill = (e, direction) => {
    e.preventDefault();
    this.setState(prevState => {
      let newPercentage = prevState.fillPercentage;
      if (direction === "fill" && newPercentage < 100) {
        newPercentage += 2;
      } else if (direction === "drink" && newPercentage >= 2) {
        newPercentage -= 2;
      }
      return { fillPercentage: newPercentage };
    });
  };

  render() {
    // Calculate fill dimensions based on your SVG's cup size
    const cupInnerHeight = 140;
    const fillHeight = (cupInnerHeight * this.state.fillPercentage) / 100;
    // Start position of the empty cup (adjusted to match your SVG's coordinates)
    const fillY = 44 + (cupInnerHeight - fillHeight);

    return (
      <div>
        <svg width="255" height="224" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <!-- Clip path matching the exact inner shape of the coffee cup -->
            <clipPath id="coffeeCupClip">
              <path 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.16508z" />
            </clipPath>
          </defs>

          <!-- Cup outline -->
          <g>
            <rect fill="#fff" id="canvas_background" height="226" width="257" y="-1" x="-1" />
            <path stroke="#000" stroke-width="1.5" fill="#fff" 
              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" />
          </g>

          <!-- Dynamic coffee fill -->
          <g clip-path="url(#coffeeCupClip)">
            <rect 
              x="79" 
              y={fillY} 
              width="145" 
              height={fillHeight} 
              fill="#8B4513" 
              style={{ transition: "all 0.4s ease" }}
            />
          </g>
        </svg>

        <button onClick={e => this.adjustFill(e, "fill")}>Fill more coffee +</button>
        <button onClick={e => this.adjustFill(e, "drink")}>Drink coffee -</button>
      </div>
    );
  }
}

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

Key Improvements: #

• No External Divs: All content lives inside the SVG, so positioning is automatic and scales with the SVG size—no more manual left/top tweaks.
• Clip Path Precision: The fill is constrained to the exact inner shape of your cup, so it never spills outside the lines.
• Smooth Transitions: We apply the transition directly to the SVG rectangle, so the fill animation feels seamless.
• Easy Maintenance: Adjusting the cup's shape only requires updating the clip path and outline—no need to mess with DOM element positions.

Option 2: Dynamic Linear Gradient (For Stylized Fills) #

If you want a more polished look (like a gradient from dark to light coffee), you can use a linear gradient and dynamically adjust its stop offsets.

Quick Snippet to Add to Your SVG: #

Inside the <defs> section:

<linearGradient id="coffeeGradient" x1="0%" y1="100%" x2="0%" y2="0%">
  <stop offset={`${100 - this.state.fillPercentage}%`} stop-color="#fff" />
  <stop offset={`${100 - this.state.fillPercentage}%`} stop-color="#8B4513" />
  <stop offset="100%" stop-color="#654321" />
</linearGradient>

Then apply the gradient to the cup's inner path:

<path fill="url(#coffeeGradient)" d="[your cup inner path coordinates]" />

This method works great for gradient fills and avoids needing a separate rectangle—just update the gradient stop offset based on your fill percentage.

Why These Solutions Are Better #

• Screen Adaptation: SVG scales perfectly, so your coffee cup will look correct on any screen size without manual adjustments.
• Path Management: You're working directly with SVG's native shapes, so modifying the cup's design only requires updating SVG elements, not external DOM nodes.
• Performance: SVG animations are often smoother than DOM-based animations, especially when dealing with multiple dynamic icons on a dashboard.

内容的提问来源于stack exchange，提问作者Raj Rj