Great question! The problem with using 50vw directly is that it aligns the left edge of your SVG to the viewport center, not the SVG's own center. This breaks as the SVG scales because the offset needed to center it depends on its current width.

Luckily, we can replicate Flexbox-like centering for animations using a combination of viewport units and element-relative transforms—this works across all screen sizes without media queries. Here's how to adjust your code (I assume you're using Framer Motion given the variant syntax):

Key Fix: Combine x: 50vw with xPercent: -50 #

The xPercent property (in Framer Motion) lets you offset an element by a percentage of its own width. Pairing this with x: 50vw ensures the SVG's center locks to the viewport center, no matter how big or small it gets:

// Updated svgVariants with proper centering
const svgVariants = { 
  hidden: { 
    scale: 0.1, 
    rotate: -360, 
    x: "50vw",       // Align left edge to viewport center
    xPercent: -50,   // Shift left by 50% of SVG's own width (centers it)
    y: "100px" 
  }, 
  visible: { 
    scale: 2, 
    rotate: 0, 
    x: "50vw", 
    xPercent: -50,   // Keep centered during this state
    y: "100px", 
    transition: { duration: 2 }, 
  }, 
  exit: { 
    x: 25,           // Navbar's fixed position
    xPercent: 0,     // Disable self-offset for fixed position
    y: 0,
    scale: 1,
    transition: { duration: 1.5 }
  }, 
}; 

// Updated svgVariants2 with the same centering logic
const svgVariants2 = { 
  initial: { 
    scale: 2, 
    x: "50vw", 
    xPercent: -50,   // Start centered
    y: "100px" 
  }, 
  animate: { 
    scale: 1, 
    x: 25,           // Move to navbar position
    xPercent: 0,     // No self-offset needed here
    y: "0px", 
    type: "spring", 
    ease: "easeInOut", 
    transition: { duration: 2 }, 
  }, 
}; 

Why This Works #

• x: 50vw pushes the SVG's left edge to the exact horizontal middle of the viewport.
• xPercent: -50 pulls the SVG left by half its own width, so its center matches the viewport center.
• This is fully responsive: if the SVG scales up/down with the viewport, xPercent automatically adjusts the offset based on the SVG's current size.

For Non-Framer Motion Scenarios #

If you're using plain CSS animations, you can achieve the same effect with:

.center-svg {
  position: absolute;
  left: 50vw;
  transform: translateX(-50%);
}

Then animate the left and transform properties as needed—this also avoids breakpoints.

Just make sure your SVG doesn't have a fixed width that overrides its responsive scaling, and the centering will stay consistent across all screen sizes.

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