【发布时间】：2021-07-01 07:48:58
【问题描述】：
我遇到了 SVG 动画无法在 Safari 浏览器上填充整个容器的问题。由于某种原因，我的 SVG 的 Safari 宽度似乎是随机的，但它在 Chrome 和其他浏览器上运行良好。
预期行为：
- 点击菜单图标后，SVG 背景动画应该用红色边框填充容器。
实际行为
- 在 Safari Mac / iOS 上动画不会填满整个容器
Codepen
下面的简化代码：
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]};
`;
【问题讨论】：
标签： javascript html css svg framer-motion