Framer Motion pathLength 属性不起作用答案

【问题标题】：Framer Motion pathLength property not workingFramer Motion pathLength 属性不起作用
【发布时间】：2020-07-07 23:08:24
【问题描述】：

我今天遇到了 Framer Motion 的一个奇怪问题。

由于某种原因，这个 sn-p（从他们的网站复制和粘贴）不起作用，只有不透明度是动画的

import React from "react";
import { motion } from "framer-motion";

const icon = {
    hidden: {
        pathLength: 0,
        fill: "rgba(255, 255, 255, 0)"
    },
    visible: {
        pathLength: 1,
        fill: "rgba(255, 255, 255, 1)",
        transition: { duration: 4 }
    }
};

const SVGComponent = props => {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <motion.path
                d="M0 100V0l50 50 50-50v100L75 75l-25 25-25-25z"
                variants={icon}
                initial="hidden"
                animate="visible"
            />
        </svg>
    );
};

export default SVGComponent;

希望各位大神帮忙，先谢谢了！

【问题讨论】：

标签： reactjs svg framer-motion

【解决方案1】：

我怀疑线条没有出现，因为您缺少笔触颜色。

您是否还从 CodeSandbox 示例中的 styles.css 文件中复制了 CSS？

https://codesandbox.io/s/rutrh?module=/src/Example.tsx&file=/src/styles.css

【讨论】：

是的，太笨了，但就是这样，需要为 svg 指定笔触颜色，非常感谢！