如何在SVG中为我的名称设置动画效果？ [英] How do I animate my name in SVG?
本文介绍了如何在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中为我的名称设置动画效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
