Question

我想用草书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;
  }
}

Answer 1

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

将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>

如何在SVG中为我的名字制作动画？

1 个答案: