如何在SVG中为我的名称设置动画效果？

问题描述：

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

I want to write my name out in cursive SVG

到目前为止，我已经部分工作了。但我想让它从空白到写出我的名字。到目前为止，它只是重写了它的overtop。还有，有没有办法改变字体族？

So far I've gotten it partially working. But i want it to go from being blank to writing out my name. So far it just rewrites overtop of it. Also, is there a way to change the font family?

小提琴

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;
  }
}

答

但我想让它从空白到写出我的名字。

But i want it to go from being blank to writing out my name. So far it just rewrites overtop of it.

更改 fill =＃000000 code>到 fill =none。

有更改字体家族的方法吗？

Also, is there a way to change the font family?

更改 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>

如何在SVG中为我的名称设置动画效果？

相关推荐