我有一个使用 svg 的动画。 您可以在此处查看该网站：https://www.demo.simplerwebsites.com

仅用于动画的代码笔：https://codepen.io/webbchris2001/pen/wvojzwE

动画是为了“写文本”。 它在 Firefox 和 Chrome 上运行良好。然而，出于某种原因，在 safari 上它会出现故障并且似乎在眨眼。 手机上的 safari 也是如此。

当我添加 from{stroke-dashoffset: 100%;} 时，它会在所有浏览器中导致相同的故障。 我知道 Safari 不接受用于 stroke-dashoffset 的负值，但我不相信这里会有任何负值？

Javascript：

const masks = ['natur-n','natur-a','natur-t','natur-u','natur-r','comma','kunst-k','kunst-u','kunst-n','kunst-s','kunst-t','and-a','and-n','and-d','design-d','design-e','design-s','design-i','design-g','design-n'];

    masks.forEach((mask,index,el) => {
        const id = `#${mask}-path`;
        let path = document.querySelector(id);
        const length = path.getTotalLength();
        path.style.strokeDasharray = length;
        path.style.strokeDashoffset = length;
    });

CSS：

        .marketing-lab .mask {
          fill: none;
          stroke: #fff;
          stroke-miterlimit: 10;
          stroke-dashoffset: 100%;
        }

        @keyframes strokeOffset {
          to {
            stroke-dashoffset: 0;
          }
        }
        #natur-n-path {
          animation: strokeOffset 0.2s ease-in-out forwards;
        }
        #natur-a-path {
          animation: strokeOffset 0.2s linear forwards 0.2s;
        }
        #natur-t-path{
          animation: strokeOffset 0.2s linear forwards 0.4s;
        }
        #natur-u-path {
          animation: strokeOffset 0.2s linear forwards 0.6s;
        }
        #natur-r-path {
          animation: strokeOffset 0.2s linear forwards 0.8s;
        }
        #comma-path{
          animation: strokeOffset 0.2s linear forwards 1.0s;
        }
        #kunst-k-path {
          animation: strokeOffset 0.2s linear forwards 1.2s;
        }
        #kunst-u-path {
          animation: strokeOffset 0.2s linear forwards 1.4s;
        }
        #kunst-n-path {
          animation: strokeOffset 0.2s linear forwards 1.6s;
        }
        #kunst-s-path {
          animation: strokeOffset 0.2s linear forwards 1.8s;
        }
        #kunst-t-path {
          animation: strokeOffset 0.2s linear forwards 2.0s;
        }
        #and-a-path {
          animation: strokeOffset 0.2s linear forwards 2.2s;
        }
        #and-n-path {
          animation: strokeOffset 0.2s linear forwards 2.4s;
        }
        #and-d-path {
          animation: strokeOffset 0.2s linear forwards 2.6s;
        }
        #design-d-path{
          animation: strokeOffset 0.2s linear forwards 2.8s;
        }
        #design-e-path{
          animation: strokeOffset 0.2s linear forwards 3.0s;
        }
        #design-s-path{
          animation: strokeOffset 0.2s linear forwards 3.2s;
        }
        #design-i-path{
          animation: strokeOffset 0.2s linear forwards 3.4s;
        }
        #design-g-path{
          animation: strokeOffset 0.2s linear forwards 3.6s;
        }
        #design-n-path{
          animation: strokeOffset 0.2s linear forwards 3.8s;
        }

编辑： 事实证明，我在轮播页面上也有这段 javascript。但是我不明白为什么？？

let size = carousel_imgs[0].clientWidth;