为什么我的动漫手写效果不起作用？ [关闭]答案

【问题标题】：Why isn't my anime handwriting effect working? [closed]为什么我的动漫手写效果不起作用？ [关闭]
【发布时间】：2020-08-22 19:48:04
【问题描述】：

所以我开始使用 Inkscape 开发我的项目。暂时只写：你好

我创建了路径（带有“Bézier 曲线”图标），然后软件自动生成了代码。我将其保存为 SVG，然后开发了 CSS。

但是当我查看页面时，屏幕上什么都没有显示。

Rem：我在 CodePen 上看到了其他的例子，我试着在我这边重现，这次文字显示在屏幕上但是动画不起作用。

为什么这不起作用？

body {
   display: flex;
   justify-content: center;
   align-items: center;
}
.handwriting {
     width: 75%;
     transition: all 1s ease;
     transition-delay: 1s;
     
     svg {
         position: relative;
         width: 100%;
         height: 100%;
         
          .text {
              stroke-dasharray : 2900;
              stroke-dashoffset: 2900;
              animation: animate 10s linear 1 forwards;
          }
        }
   }

@keyframes animate {
   to {
         stroke-dashoffset: 0;
   }
}

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>  
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="stylesheet" href="main.css" />  
     <title>HELLO</title>
    
    </head>
    
    <body>
    
    <div class="handwriting" >

<svg 
    width="297mm" 
    height="210mm" 
    version="1.1" 
    viewBox="0 0 297 210" 
    xmlns="http://www.w3.org/2000/svg"
    >

  <clipPath id="clipPath829">

    <path 
        d="m136.18 81.485q0.0625 1.125-0.1875 2.8125-0.21875 1.6562-0.625 3.8125-0.375 2.125-0.875 4.625-0.5 2.4688-1 5.2188-0.46875 2.7187-0.875 5.625-0.40625 2.875-0.625 5.7812-0.0312 0.21875-0.125 1.25-0.0625 1.0312-0.1875 2.5625-0.0937 1.5-0.21875 3.375-0.125 1.8438-0.21875 3.75-0.0937 1.9062-0.15625 3.75-0.0312 1.8125 0.0312 3.2188 0.0312 0.8125-0.40625 1.5625-0.40625 0.75-1.0312 1.3438-0.59375 0.625-1.25 0.96875-0.625 0.375-1.0625 0.375-0.375 0-0.84375-0.1875-0.46875-0.15625-0.90625-0.5-0.40625-0.3125-0.71875-0.8125-0.28125-0.53125-0.34375-1.1875-0.0312-0.5 0.0937-1.7188 0.125-1.25 0.34375-2.9062t0.46875-3.5312q0.28125-1.9062 0.46875-3.6875 0.21875-1.7812 0.3125-3.3125 0.0937-1.5312 0.0312-2.4688-0.0625-0.75-0.59375-1.125-0.53125-0.40625-1.2812-0.40625-1 0-2.6562 0.125-1.625 0.125-3.4062 0.28125-1.75 0.125-3.4062 0.25-1.6562 0.0937-2.7188 0.0937-0.21875 0-1.1875 0.0625-0.96875 0.0312-2.3125 0.125-1.3438 0.0937-2.8438 0.21875-1.5 0.0937-2.8438 0.21875-1.3125 0.125-2.2812 0.28125-0.9375 0.125-1.125 0.21875-0.1875 0.125-0.40625 0.78125-0.1875 0.625-0.375 1.5625-0.1875 0.90625-0.375 2.0625-0.15625 1.125-0.3125 2.25-0.125 1.0938-0.21875 2.125-0.09375 1-0.125 1.6875-0.0625 1.8438-0.125 3.6562-0.0625 1.7812-0.34375 3.1875t-0.90625 2.2812q-0.59375 0.875-1.7188 0.875-0.40625 0-1-0.4375-0.59375-0.40625-1.1562-1.0312-0.53125-0.625-0.9375-1.3125t-0.4375-1.25q-0.0625-0.59375 0.0625-1.375t0.3125-1.5938 0.375-1.5625 0.28125-1.2812q0.4375-2.0312 0.875-4.6562 0.46875-2.6562 0.90625-5.6875 0.4375-3.0625 0.875-6.4062t0.84375-6.7812q0.40625-3.4688 0.78125-6.9062t0.71875-6.6875q0.03125-0.375 0.25-0.78125 0.21875-0.4375 0.5625-0.75 0.375-0.34375 0.84375-0.5 0.5-0.1875 1.0312-0.09375 1.5 0.28125 2.2187 1 0.71875 0.6875 0.84375 1.9375 0.1875 2.1562-0.21875 4.625-0.40625 2.4375-0.96875 4.9375-0.53125 2.5-1 4.9375-0.4375 2.4375-0.34375 4.5938 0.0312 0.4375 0.4375 0.6875 0.40625 0.21875 0.96875 0.34375t1.1562 0.15625q0.59375 0.0312 1.0312 0.0312 0.65625 0 2.5-0.0625 1.875-0.0625 4.3125-0.1875 2.4688-0.15625 5.1562-0.375 2.7188-0.25 5.0625-0.5625 2.3438-0.34375 3.9688-0.78125 1.6562-0.4375 2-1 0.21875-0.34375 0.46875-1.4062 0.28125-1.0938 0.5625-2.7187 0.3125-1.625 0.59375-3.6562 0.28125-2.0625 0.5-4.3438 0.25-2.2812 0.375-4.6562 0.15625-2.4062 0.15625-4.7188 0-0.28125 0.25-0.71875 0.28125-0.4375 0.71875-0.84375 0.46875-0.40625 1.0312-0.6875 0.59375-0.3125 1.25-0.3125 0.4375 0 0.96875 0.15625 0.5625 0.125 1.0625 0.40625t0.84375 0.71875 0.375 1.0625z"
        stroke-width="1"
        style="font-feature-settings:normal;
                font-variant-caps:normal;
                font-variant-ligatures:normal;
                font-variant-numeric:normal;"
        
    />
    
    <path d="m160.83 100.42q0-0.34375-0.21875-0.65625-0.1875-0.3125-0.5-0.5625-0.28125-0.25-0.625-0.40625-0.3125-0.15625-0.53125-0.15625-1.2188 0-2.7188 1.0312-1.4688 1-2.8438 2.8125-1.3438 1.8125-2.4062 4.3438t-1.4375 5.5625q0.4375-0.28125 1.4688-1.0938t2.2188-1.8125q1.2188-1 2.375-2.0312 1.1875-1.0312 1.9062-1.7812 0.875-0.90625 1.5-1.625 0.65625-0.71875 1.0312-1.3125 0.40625-0.625 0.59375-1.1875t0.1875-1.125zm22.5 1.0312q0 0.71875-0.625 2.3125-0.625 1.5625-1.7188 3.5938-1.0938 2-2.5625 4.2188t-3.1875 4.1875q-1.75 2.125-3.9375 4.125t-4.7188 3.5625q-2.5 1.5625-5.2812 2.5t-5.7188 0.9375q-3 0-5.125-1-2.0938-1.0312-3.4375-2.6875-1.3125-1.6562-1.9375-3.75-0.59375-2.0938-0.59375-4.2812 0-1.9688 0.375-3.9688 0.375-2.0312 1.0625-3.9375 0.71875-1.9375 1.6875-3.6875t2.1562-3.25q0.75-0.96875 1.8125-2.0312 1.0938-1.0938 2.4375-2 1.375-0.90625 2.9688-1.5 1.5938-0.625 3.3438-0.625 1.25 0 2.1875 0.46875 0.96875 0.4375 1.5938 1.1875 0.65625 0.71875 0.96875 1.625 0.34375 0.90625 0.34375 1.8125 0 1.8437-0.6875 3.5625t-2.25 3.5625q-1.5625 1.8125-4.0938 3.8438-2.5 2-6.1562 4.4375-0.21875 0.15625-0.625 0.40625t-0.8125 0.5625q-0.40625 0.28125-0.71875 0.59375-0.28125 0.28125-0.28125 0.5 0 0.84375 0.28125 1.8438 0.28125 0.96875 1 1.8125 0.75 0.8125 2.0312 1.375t3.2812 0.5625q1.4062 0 2.9062-0.34375 1.5312-0.375 3.0312-1 1.5312-0.65625 3-1.5312 1.4688-0.90625 2.7812-2 1.75-1.4062 3.5312-3.25 1.7812-1.875 3.4688-4.0312t3.2188-4.5312q1.5312-2.4062 2.7812-4.875 0.34375-0.6875 0.75-0.9375 0.4375-0.25 0.71875-0.25 0.375 0 0.5625 0.5 0.1875 0.46875 0.1875 1.375z"
        stroke-width="1"
        style="font-feature-settings:normal;
                font-variant-caps:normal;
                font-variant-ligatures:normal;
                font-variant-numeric:normal;"
        
        
    />
    
    <path d="m208.33 109.11q0 0.46875-0.625 1.625-0.59375 1.1562-1.6875 2.75-1.0625 1.5625-2.5625 3.4375-1.4688 1.875-3.1875 3.7812-1.7188 1.875-3.625 3.6562-1.9062 1.75-3.8438 3.125-1.9375 1.3438-3.8438 2.1562-1.875 0.8125-3.5938 0.8125-2.3125 0-3.75-0.84375t-2.25-2.25-1.125-3.1875q-0.28125-1.8125-0.28125-3.75 0-1.1562 0.15625-3.375 0.1875-2.2188 0.53125-5.0625t0.84375-6.0938q0.53125-3.2812 1.2188-6.5 0.6875-3.2188 1.5312-6.1875t1.8438-5.2188q1.0312-2.2812 2.2188-3.625 1.1875-1.375 2.5312-1.375 0.53125 0 0.78125 0.625t0.25 2q0 0.03125-0.25 0.84375-0.25 0.78125-0.65625 2-0.375 1.1875-0.84375 2.625-0.4375 1.4375-0.84375 2.7188t-0.71875 2.2188q-0.28125 0.9375-0.34375 1.1562-1.75 5.9062-2.7188 11.656-0.9375 5.7188-0.9375 10.688 0 1.5 0.34375 2.5312t0.90625 1.6875q0.59375 0.625 1.375 0.9375 0.78125 0.28125 1.6562 0.28125 1.2188 0 2.6875-0.625t3.0312-1.6875q1.5938-1.0938 3.25-2.5312t3.25-3.0312 3.0625-3.25q1.5-1.6562 2.7812-3.1875 0.3125-0.375 0.6875-0.75 0.40625-0.375 0.8125-0.6875 0.4375-0.34375 0.8125-0.53125 0.375-0.21875 0.65625-0.21875 0.46875 0 0.46875 0.65625z"
        stroke-width="1"
        style="font-feature-settings:normal;
                font-variant-caps:normal;
                font-variant-ligatures:normal;
                font-variant-numeric:normal;"
        
    />
    
    <path d="m233.24 111.08q0 1.4688-1.7812 4.5938-0.34375 0.59375-0.96875 1.4375-0.59375 0.8125-1.3438 1.7188-0.75 0.875-1.5625 1.8125-0.8125 0.90625-1.5938 1.6875-1.1875 1.1875-2.625 2.3125-1.4062 1.125-3 2.0312-1.5625 0.90625-3.25 1.4688-1.6562 0.53125-3.2812 0.53125-2.1562 0-4.0312-0.78125t-3.2812-2.4062q-1.375-1.625-2.1875-4.0625-0.78125-2.4688-0.78125-5.8125 0-2.2812 0.21875-4.75 0.21875-2.5 0.5625-5t0.75-4.9375q0.4375-2.4687 0.875-4.75 0.28125-1.5625 0.46875-2.5625 0.21875-1 0.375-1.8438t0.28125-1.6875q0.125-0.875 0.3125-2.1562 0.125-0.875 0.21875-1.5312 0.125-0.6875 0.1875-1.125 0.125-0.75 0.40625-1.4375 0.3125-0.6875 0.75-1.2188 0.46875-0.53125 1.0625-0.84375t1.3125-0.3125q1.5 0 2.2188 1.4062-0.1875 0.96875-0.40625 1.875-0.1875 0.875-0.34375 1.875-0.78125 3.9375-1.2812 6.375t-0.71875 3.4375q-0.375 1.9688-0.8125 4.25-0.40625 2.2812-0.78125 4.6562-0.34375 2.375-0.5625 4.6875t-0.21875 4.3125q0 2.1562 0.34375 3.9375 0.34375 1.75 1.0938 3 0.78125 1.25 1.9688 1.9375 1.2188 0.6875 2.9375 0.6875 1.875 0 3.6875-0.8125 1.8125-0.84375 3.4688-2.125 1.6875-1.2812 3.1875-2.8125 1.5-1.5625 2.75-3 1-1.1875 1.75-2.0312 0.75-0.875 1.25-1.4688 0.40625-0.46875 0.90625-0.96875 0.53125-0.5 0.96875-0.5 0.5 0 0.5 0.90625z"
        stroke-width="1"
        style="font-feature-settings:normal;
                font-variant-caps:normal;
                font-variant-ligatures:normal;
                font-variant-numeric:normal;"
    
    />
    <path d="m256.87 109.14q0 1-0.0937 1.9062t-0.28125 1.75q-0.1875 0.84375-0.5 1.7188-0.3125 0.84375-0.75 1.75-0.4375 0.96875-1.5938 2.3125t-2.7812 2.7812q-1.5938 1.4375-3.5312 2.8438-1.9062 1.4062-3.875 2.5312t-3.875 1.8125q-1.875 0.6875-3.4062 0.6875-2.0938 0-3.6562-0.6875-1.5625-0.71875-2.5938-1.8438-1.0312-1.1562-1.5625-2.625-0.5-1.4688-0.5-2.9688 0-1 0.25-2.2812t0.65625-2.6562 0.96875-2.8125 1.1875-2.75 1.2812-2.4375 1.2812-1.9062q1.0938-1.375 2.625-2.6875 1.5625-1.3125 3.4062-2.3125 1.8438-1.0312 3.9375-1.6562 2.125-0.625 4.375-0.625 1.6875 0 3.3125 0.84375 1.625 0.8125 2.875 2.2187 1.2812 1.4062 2.0625 3.25t0.78125 3.8438zm-4.875 0.90625q0-3.0938-1.7812-4.8438-1.75-1.75-5.0625-1.75-1.125 0-2.2812 0.59375t-2.2188 1.4688-1.9688 1.875q-0.875 0.96875-1.4688 1.75-0.59375 0.8125-1.3125 2.2188-0.71875 1.375-1.375 2.9688-0.625 1.5625-1.0625 3.1562-0.40625 1.5625-0.40625 2.75 0 0.71875 0.28125 1.4688 0.28125 0.71875 0.78125 1.3125 0.53125 0.5625 1.25 0.9375t1.5938 0.375q0.9375 0 2.4062-0.5625 1.5-0.5625 3.1562-1.5312 1.6875-1 3.375-2.3438 1.6875-1.375 3.0312-2.9688 1.375-1.5938 2.2188-3.3438t0.84375-3.5312z"
        stroke-width="1"
        style="font-feature-settings:normal;
                font-variant-caps:normal;
                font-variant-ligatures:normal;
                font-variant-numeric:normal;"
        
    />
  </clipPath>
 
   
 
  <path 
    class="text"
    d="m167.86 131.02-0.71955 6.3046-0.82234 5.8934-1.2678 3.6663-2.1586-7.9493 6.7843 0.99366 5.0711-0.54823 4.0432-1.9188-2.3985-7.0241-0.34264 4.4543-0.78807 7.778c-1.0134 1.7567-0.20165 3.3614-0.23985 5.0368l5.6878-6.2361 3.0495-2.6726 0.0343-2.1586-2.1244 0.41117-1.9531 3.7348 0.99366 3.118 3.3236-0.10279 3.7691-3.2208 3.4264-7.7094-1.6104 5.3452-1.0622 4.934 1.2335 1.8845 2.5013-1.0622 1.9873-1.7817 1.4391-2.0216 1.4391-7.6409-1.2678 10.416 1.0622 1.7132 2.2272-0.27411 2.5013-2.2614 1.7817-2.8782 1.953-1.1992 2.5356 0.71955 0.30837 2.5013-1.9873 2.5013-3.1523 1.1307-1.1307-1.6789-0.75381-5.7564" 
    clip-path="url(#clipPath829)" 
    fill="none" 
    stroke="#00ef00" 
    stroke-width="2"
    />
 
</svg>
</div>
</body>
</html>

【问题讨论】：

这不是 CSS。请更新您问题中的 sn-p 以显示编译后的 CSS，而不是您正在编写的任何预处理语言。
如果您将剪切路径从 clipPath 元素中展开，您将能够看到您的动画路径超出了剪切路径，并被此完全剪切。否则动画正在工作

标签： html css svg

【解决方案1】：

不知何故，您要制作动画的路径与剪辑路径的相对位置不同步。要解决这个问题，您可以像这样使用 Inkscape：

在 Inkscape 中打开 SVG。选择视图 -> 显示模式 -> 轮廓。然后，您可以看到黑色的路径和绿色的剪辑路径。您会注意到它们没有重叠：

如果您现在尝试移动和缩放路径以使其适合剪辑，您会发现两者一起移动。相反，首先选择对象 -> 剪辑 -> 释放。然后你可以移动路径而不影响剪辑路径。
移动和缩放路径，直到它适合剪辑路径。此时最好不要移动剪辑路径。提示：如果您在缩放路径时按住Ctrl，则会保留纵横比。这可能会让事情变得更容易一些。

现在打开编辑 -> XML 编辑器。如果您已在窗口的图形部分选择了路径，则还应在 XML 编辑器中选择它。从属性列表中，选择d。复制显示的完整字符串：

（这是 1.0 版的截图。如果您仍在使用旧版本，这可能看起来有点不同。）

转到您保存的 HTML 文件并将您的 path.text 的 d 属性与复制的数据交换。应该就是这样了，您现在可以关闭 Inkscape，丢弃所有内容。

【讨论】：

（我检查了你的评论，把它扔进了谷歌翻译。）我真的不知道是什么原因导致事情不同步。通常，如果您转换具有剪辑路径的路径，Inkscape 会非常一致。根据我的经验，故意中断同步实际上比保持同步更难。
动画不工作。当我运行 .html 时，我只显示了 Hello 。但是，我已经在 Inkscape 下进行了所有修改，并将新数据从路径复制到 .html 中。（我在 W10 / Edge 环境中工作，但在其他浏览器下也有同样的问题）注意：我注意到从站点 codepen.io 复制的其他脚本（同类：“手写”）我有相同的 pb：文本显示良好，但动画不起作用。问题是否来自我必须添加的开头的 html 部分（带有指向 .css 的链接），但 .css 似乎正确？
对我来说它有效：codepen.io/ccprog/pen/rNeWYQa 您是否注意到 enxaneta 的警告，即样式表不是用 CSS 编写的？它需要被预处理为 SCSS。

【解决方案2】：

有效！！！ ;-)) 事实上，我不知道我必须经过一个编译步骤（从 SCSS 到 CSS）？？？对我来说，这是通常的 CSS（除了我真的看不出两者之间的区别吗？）再次感谢你们所有人，特别是 CCPROG 的响应能力和清晰详细的解释。祝你有美好的一天。

【讨论】：