0

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

仅用于动画的 Codepen：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;
4

0 回答 0