我想用草书 SVG 写下我的名字
到目前为止，我已经部分工作了。但我希望它从空白变成写下我的名字。到目前为止，它只是重写了它。另外，有没有办法更改字体系列？
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 更改为 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>
关于html - 如何在 SVG 中为我的名字制作动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23348508/