html - 如何在SVG中设置我的名字的动画？

我想用草书SVG写下我的名字

到目前为止，我已经使其部分工作了。但是我希望它从空白到写出我的名字。到目前为止，它只是重写了它的顶层。另外，有没有办法更改字体系列？

Fiddle

的HTML

  <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>practice</title>
    <script type="text/javascript" src="script.js">

    </script>

    <link href="test.scss" rel="stylesheet" />
    <link href="svg.css" rel="stylesheet" />
</head>
<body>
    <svg width="700" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">

        <path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
    s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
    C46.039,146.545,53.039,128.545,66.039,133.545z" />


        <text class="path" xml:space="preserve" text-anchor="middle" font-family="serif" font-size="65" id="svg_1" y="330" x="528" stroke-width="2" stroke="#000000" fill="#000000">joshua</text>

    </svg>
</body>
</html>

的CSS

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: dash 2s linear alternate infinite;
}

@-webkit-keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

最佳答案

但是我希望它从空白到写出我的名字。到目前为止
只是重写它的顶部。

将fill="#000000更改为fill="none"。

另外，有没有办法更改字体系列？

更改font-family属性。

<text class="path" xml:space="preserve" text-anchor="middle"
      font-family="Arial" font-size="65" id="svg_1" y="330" x="528"
      stroke-width="2" stroke="#000000" fill="none">joshua</text>

关于html - 如何在SVG中设置我的名字的动画？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23348508/