How do I animate my name in SVG?

2019-05-30 16:01发布

站内问答 / HTML/CSS
1237 1 4

I want to write my name out in cursive SVG

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?

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

标签： html css svg
举报
1条回答
神经病院院长
2楼-- · 2019-05-30 16:30

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

Change fill="#000000 to fill="none".

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

Change the font-family attribute.

<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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)