我基本上是在尝试使用 CSS 为我自己的 SVG 签名制作此 SVG 签名动画:https://webdesign.tutsplus.com/tutorials/sign-on-the-dotted-line-animating-your-own-svg-signature--cms-23846
我已经接近了，但出于某种原因，它正在绘制 SVG 图像的轮廓，而不是 SVG 本身的笔画？我不确定我做错了什么。这是我得到的:
.signature {
max-width: 400px;
margin: 0 auto;
position: relative;
overflow: auto;
width: 100%;
height: 0;
padding-bottom: 20%;
}
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
path {
fill: none;
stroke: #2a3745;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
@keyframes write1 {
5% {
stroke-dashoffset: 890;
}
60% {
stroke-dashoffset: 0;
}
}
@keyframes write2 {
5%, 65% {
stroke-dashoffset: 915;
}
100% {
stroke-dashoffset: 0;
}
}
.stroke-A {
stroke-dasharray: 890;
animation: write1 4s 1 linear;
}
.stroke-mber {
stroke-dasharray: 915;
animation: write2 4s 1 linear;
}<div class="signature">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 591.3 429.4" xml:space="preserve">
<g>
<g>
<path class="stroke-A" d="M1.9,277.9c53.5-7.3,104.9-28.2,148.7-59.7c44.1-31.7,79.6-74.2,104.2-122.5c13.8-27.1,24.2-55.8,31.5-85.4
c-1-0.1-2-0.3-2.9-0.4c-6.4,51.9-10.7,109.6,24.8,152.7c1.1,1.3,3.2-0.4,2.4-1.8c-9.3-16.7-25.7-27.6-42.3-36.3
c-19.1-10.1-39.2-18.9-59.5-26.3C169.2,83.5,125.8,75.6,84.4,87c-19.4,5.3-37.9,14.9-51.4,30c-1.3,1.4,0.8,3.6,2.1,2.1
c24.6-27.5,64.8-36.2,100.4-34.4c43.3,2.2,84.9,19.5,123.4,38.3c18.8,9.2,38.6,20.4,49.1,39.3c0.8-0.6,1.6-1.2,2.4-1.8
c-34.9-42.3-30.2-99.6-23.9-150.5c0.2-1.7-2.5-2-2.9-0.4c-13,52.7-36.2,103-70.3,145.4c-33,41-75.7,73.6-123.8,95
c-28,12.5-57.8,20.9-88.2,25.1C-0.8,275.2,0,278.1,1.9,277.9L1.9,277.9z"/>
</g>
</g>
<g>
<g>
<path class="stroke-mber" d="M278.2,158.8c8.9-14.5,20.4-27.1,33.8-37.6c4.1-3.2,8.4-7.2,13.9-7.4c4.7-0.1,7.1,2.6,8.6,6.7c3.5,9.4,4.2,19.7,2.7,29.6
c1,0.1,2,0.3,2.9,0.4c-1.7-14.3,3.3-28.5,13.2-38.9c2.8-2.9,6.2-6.8,10.4-7.1c5.6-0.3,6.7,4.5,7.1,8.8c0.7,8.1,0.9,16.2,1.3,24.3
c0.1,1.7,2.4,2.1,2.9,0.4c2.2-7.2,10.3-19.4,18.8-12c2.4,2.1,4,4.5,7,5.9c3,1.4,6.4,1.8,9.6,1.5c15.1-1.5,21.9-16.6,25.7-29.4
c4.7-15.8,5-33.1,0.6-49c-1.1-3.9-4.3-6.9-8.6-4.7c-5,2.6-2.6,12-2.4,16.3c1.3,21.1,5.9,41.9,13.5,61.6c0.5,1.3,2.5,1.6,2.9,0
c1.8-7.5,3.8-15.4,9.6-20.9c6.2-5.9,21.6-9.4,25.3,1.4c2.4,6.9-3.5,13.9-9.3,16.8c-8.5,4.2-17.5,2.6-26.5,1.6
c-1.7-0.2-2.1,2.6-0.4,2.9c16.5,3.3,34.2,5.4,49.3-3.9c6-3.7,11.1-9.1,13.8-15.6c1.8-4.4,3.5-12.9-0.2-16.9
c-3.8-4.1-7.3,1.5-8.3,4.9c-1.4,5.2-0.2,10.8,2.4,15.3c6.2,10.7,19.9,14.8,30.9,9.1c11.2-5.8,17.3-20.8,8.4-31.1
c-0.9-1.1-3,0.1-2.5,1.5c3.7,9.5,7.4,19,11.1,28.5c0.9-0.4,1.8-0.8,2.7-1.2c-12.1-15.7,11.2-29.8,21.6-37.6
c9.1-6.9,16.1-15.5,19.3-26.5c6.2-21.3-3-43.8-21.1-56.1c-1.6-1.1-3.1,1.5-1.5,2.6c20.1,13.7,27.9,41.2,15.4,62.7
c-7.1,12.2-19.9,17.9-29.9,27.2c-8,7.4-13.9,19.6-6.4,29.3c0.9,1.2,3.4,0.6,2.7-1.2c-3.7-9.5-7.4-19-11.1-28.5
c-0.8,0.5-1.7,1-2.5,1.5c8.8,10.2-0.4,25-11.9,28c-12.1,3.1-25.8-6.3-25.3-19.3c0.1-1.9,2.2-10,4.5-4.6c1.2,3,0.2,7.4-0.8,10.3
c-2.3,6.6-7.6,12.1-13.5,15.6c-14.4,8.4-30.9,6.3-46.4,3.2c-0.1,1-0.3,2-0.4,2.9c10.9,1.3,22.8,3,32.1-4.6
c5.5-4.5,9.5-12.9,5.6-19.7c-4.7-8.3-16.8-8.5-24.3-4.3c-9.7,5.4-13,15.8-15.4,25.9c1,0,1.9,0,2.9,0
c-7.4-19.2-12.1-39.4-13.4-59.9c-0.1-2.3-1.8-17,3-14.8c3.6,1.7,4.1,13.1,4.5,16.4c1,9.7,0.5,19.5-1.7,29
c-2.1,8.9-5.2,19-11.6,25.8c-3.5,3.8-8.1,6.2-13.3,6.5c-5.5,0.4-8.9-1.8-12.7-5.5c-10.5-10.3-21.5,1.6-24.9,12.3
c1,0.1,2,0.3,2.9,0.4c-0.3-5.9-0.6-11.8-1-17.7c-0.2-4,0.1-8.6-1.4-12.4c-2.5-6.5-10.1-7.4-15.4-3.6
c-14.4,10.2-22.3,29.4-20.2,46.7c0.2,1.5,2.7,2.2,2.9,0.4c1.8-12.2,1.6-47.3-19.8-38.9c-4.5,1.8-8.5,5.5-12.3,8.5
c-4.4,3.5-8.5,7.3-12.5,11.3c-7.6,7.7-14.3,16.2-19.9,25.4C274.6,158.9,277.2,160.4,278.2,158.8L278.2,158.8z"/>
</g>
</g>
</svg>
</div>最佳答案
据我所知，问题出在您的 svg 文件上。
只需返回您的插图工具，仅使用彩色路径重新创建您的签名，无需填充。然后你的动画将沿着这条路径移动而不是绕着它移动。
在下面的示例中，我只使用了“A”。
.signature {
max-width: 400px;
margin: 0 auto;
position: relative;
overflow: auto;
width: 100%;
height: 0;
padding-bottom: 20%;
}
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
path {
fill: none;
stroke: #2a3745;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
@keyframes write1 {
5% {
stroke-dashoffset: 890;
}
60% {
stroke-dashoffset: 0;
}
}
@keyframes write2 {
5%, 65% {
stroke-dashoffset: 915;
}
100% {
stroke-dashoffset: 0;
}
}
.stroke-A {
stroke-dasharray: 890;
animation: write1 4s 1 linear;
}
.stroke-mber {
stroke-dasharray: 915;
animation: write2 4s 1 linear;
}<div class="signature">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 591.3 429.4" style="enable-background:new 0 0 591.3 429.4;" xml:space="preserve">
<g>
<g>
<path class="stroke-A" d="M1.9,277.9c0,0,217-19.4,281.7-268.3c0,0-14.1,118,27,151.2c0,0-158.3-140.8-277.6-43.8"/>
</g>
</g>
<g>
<g>
<path
class="stroke-mber"
d="M278.2,158.8c8.9-14.5,20.4-27.1,33.8-37.6c4.1-3.2,8.4-7.2,13.9-7.4c4.7-0.1,7.1,2.6,8.6,6.7c3.5,9.4,4.2,19.7,2.7,29.6
c1,0.1,2,0.3,2.9,0.4c-1.7-14.3,3.3-28.5,13.2-38.9c2.8-2.9,6.2-6.8,10.4-7.1c5.6-0.3,6.7,4.5,7.1,8.8c0.7,8.1,0.9,16.2,1.3,24.3
c0.1,1.7,2.4,2.1,2.9,0.4c2.2-7.2,10.3-19.4,18.8-12c2.4,2.1,4,4.5,7,5.9s6.4,1.8,9.6,1.5c15.1-1.5,21.9-16.6,25.7-29.4
c4.7-15.8,5-33.1,0.6-49c-1.1-3.9-4.3-6.9-8.6-4.7c-5,2.6-2.6,12-2.4,16.3c1.3,21.1,5.9,41.9,13.5,61.6c0.5,1.3,2.5,1.6,2.9,0
c1.8-7.5,3.8-15.4,9.6-20.9c6.2-5.9,21.6-9.4,25.3,1.4c2.4,6.9-3.5,13.9-9.3,16.8c-8.5,4.2-17.5,2.6-26.5,1.6
c-1.7-0.2-2.1,2.6-0.4,2.9c16.5,3.3,34.2,5.4,49.3-3.9c6-3.7,11.1-9.1,13.8-15.6c1.8-4.4,3.5-12.9-0.2-16.9
c-3.8-4.1-7.3,1.5-8.3,4.9c-1.4,5.2-0.2,10.8,2.4,15.3c6.2,10.7,19.9,14.8,30.9,9.1c11.2-5.8,17.3-20.8,8.4-31.1
c-0.9-1.1-3,0.1-2.5,1.5c3.7,9.5,7.4,19,11.1,28.5c0.9-0.4,1.8-0.8,2.7-1.2C536.3,104.9,559.6,90.8,570,83
c9.1-6.9,16.1-15.5,19.3-26.5c6.2-21.3-3-43.8-21.1-56.1c-1.6-1.1-3.1,1.5-1.5,2.6c20.1,13.7,27.9,41.2,15.4,62.7
c-7.1,12.2-19.9,17.9-29.9,27.2c-8,7.4-13.9,19.6-6.4,29.3c0.9,1.2,3.4,0.6,2.7-1.2c-3.7-9.5-7.4-19-11.1-28.5
c-0.8,0.5-1.7,1-2.5,1.5c8.8,10.2-0.4,25-11.9,28c-12.1,3.1-25.8-6.3-25.3-19.3c0.1-1.9,2.2-10,4.5-4.6c1.2,3,0.2,7.4-0.8,10.3
c-2.3,6.6-7.6,12.1-13.5,15.6c-14.4,8.4-30.9,6.3-46.4,3.2c-0.1,1-0.3,2-0.4,2.9c10.9,1.3,22.8,3,32.1-4.6
c5.5-4.5,9.5-12.9,5.6-19.7c-4.7-8.3-16.8-8.5-24.3-4.3c-9.7,5.4-13,15.8-15.4,25.9c1,0,1.9,0,2.9,0
c-7.4-19.2-12.1-39.4-13.4-59.9c-0.1-2.3-1.8-17,3-14.8c3.6,1.7,4.1,13.1,4.5,16.4c1,9.7,0.5,19.5-1.7,29
c-2.1,8.9-5.2,19-11.6,25.8c-3.5,3.8-8.1,6.2-13.3,6.5c-5.5,0.4-8.9-1.8-12.7-5.5c-10.5-10.3-21.5,1.6-24.9,12.3
c1,0.1,2,0.3,2.9,0.4c-0.3-5.9-0.6-11.8-1-17.7c-0.2-4,0.1-8.6-1.4-12.4c-2.5-6.5-10.1-7.4-15.4-3.6
c-14.4,10.2-22.3,29.4-20.2,46.7c0.2,1.5,2.7,2.2,2.9,0.4c1.8-12.2,1.6-47.3-19.8-38.9c-4.5,1.8-8.5,5.5-12.3,8.5
c-4.4,3.5-8.5,7.3-12.5,11.3c-7.6,7.7-14.3,16.2-19.9,25.4C274.6,158.9,277.2,160.4,278.2,158.8L278.2,158.8z"/>
</g>
</g>
</svg>
</div>关于css - SVG 签名动画问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42372928/