SVG 动画不会填充 Safari 中的容器

Question

我遇到了 SVG 动画无法在 Safari 浏览器中填满整个容器的问题。出于某种原因，我的 SVG 在 Safari 上的宽度似乎是随机的，但它在 Chrome 和其他浏览器上工作正常。

预期行为：

单击菜单图标后，SVG 背景动画应该用红色边框填充容器。

实际行为

动画不会在 Safari 上填满整个容器 Mac / iOS

Codepen

https://codesandbox.io/s/safari-broken-svg-animation-yzfe3

下面的简化代码：

import React, { useEffect, useState } from "react";
import styled from "styled-components";

function MenuOverlay({ isOpen, firstLoad }) {
  const controls = useAnimation();

  const variants = {
    open: {
      d: [
        "M 0 24 L 0 0 L 1 0 C 1 8 1 16 1 24 L 0 24 Z",
        "M 0 24 L 0 0 L 9.143 0 C 18.286 0 18.286 24 9.143 24 L 0 24 Z",
        "M 0 24 L 0 0 L 24 0 C 24 8 24 16 24 24 L 0 24 Z",
      ],
      scaleX: [0, 1, 1],
      transition: {
        ease: ["easeIn", "easeOut"],
      },
    },
    close: {
      d: [
        "M 0 24 L 0 0 L 24 0 C 24 8 24 16 24 24 L 0 24 Z",
        "M 0 24 L 0 0 L 16.5 0 C 9 5.5 8.5 17.5 16.5 24 L 0 24 Z",
        "M 0 24 L 0 0 L 1 0 C 1 8 1 16 1 24 L 0 24 Z",
      ],
      scaleX: [1, 1, 0],
      transition: {
        ease: ["easeIn", "easeOut"],
      },
    },
  };

  // Sequence animation
  async function open() {
    await controls.start("open");
  }
  async function close() {
    await controls.start("close");
  }

  if (!firstLoad) {
    isOpen ? open() : close();
  }

  return (
    <LazyMotion features={domAnimation}>
      <Container>
        <Svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" preserveAspectRatio="none">
          <Path animate={controls} variants={variants} />
        </Svg>
      </Container>
    </LazyMotion>
  );
}

export default MenuOverlay;

// Styled Components
const Container = styled(m.div)`
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  pointer-events: none;
  z-index: 0;
`;

const Svg = styled.svg`
  border: 1px solid red;
  height: 100vh;
  /* Mobile */
  width: 100vw;
  transform: scaleX(-1);
  /* Tablet */
  @media screen and (min-width: ${({ theme }) => theme.breakpoints[0]}) {
    width: 75vw;
    transform: unset;
  }
  /* Desktop */
  @media screen and (min-width: ${({ theme }) => theme.breakpoints[1]}) {
    width: 50vw;
  }
`;
const Path = styled(m.path)`
  fill: ${({ theme }) => theme.black[1]};
`;

Answer 1

尝试在你有转换的地方添加 WebKit 版本的转换：scaleX(-1);

-webkit-transform: scaleX(-1);

您能否也向我们提供代码笔或 link 到您拥有它的地方，以便我们更好地了解行为？

好的，在查看您的代码后尝试修改您的 SVG 视图框

<Svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" preserveAspectRatio="none">

到

<Svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" preserveAspectRatio="none">

SVG 动画不会填充 Safari 中的容器

SVG Animation does not fill container in Safari

html

javascript

css

svg

framer-motion