javascript - 动态文本的 SVG 线条动画

Question

我正在尝试为用户输入的文本实现绘图效果，使其看起来像是在书写。

很像本页“那里”的画法:http://maxwellito.github.io/vivus/

我所在的位置:https://jsfiddle.net/w3nmwqgo/1/

SO 编辑器提示没有代码，所以这是同样的事情:

var path = document.getElementsByTagName('path')[0];

// this doesn't return true length
var length = path.getTotalLength();

path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;

var intervalId = setInterval(function() {
  if (length < 0) clearInterval(intervalId);

  path.style.strokeDashoffset = --length;
}, 25);

/* shouldn't need this? */
path {
  transform: translate(20px, 100px);
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path fill="none" stroke="black" d="M-7.34 0.29C-7.34 0.22-2.88-6.77 3.24-14.54C11.38-24.84 18.79-31.82 24.70-34.78C24.77-34.85 34.49-39.60 39.89-35.14C41.26-33.98 41.90-32.62 41.98-30.96C42.41-23.69 34.27-17.28 29.88-11.81C26.35-7.42 24.98-4.32 25.63-2.45C25.99-1.37 27.00-0.65 28.51-0.50C36.22 0.22 45.50-6.34 56.88-15.91C57.17-16.13 57.17-16.56 56.95-16.85C56.74-17.14 56.30-17.14 56.02-16.92C49.10-11.09 44.14-7.42 39.96-5.04C35.42-2.45 31.82-1.44 28.66-1.80C27.14-2.02 27.00-2.66 26.93-2.81C26.64-3.67 26.71-5.76 30.89-11.02C33.26-14.11 35.78-16.63 35.78-16.63C36.58-17.42 43.63-24.62 43.27-31.03C43.20-33.05 42.12-34.92 40.68-36.07C39.24-37.22 37.51-38.02 35.42-38.23C33.84-38.45 32.04-38.30 30.02-37.94C26.78-37.22 24.19-36.00 24.12-35.93C20.74-34.27 16.92-31.32 12.74-27.22C9.43-23.98 5.90-20.02 2.23-15.41C-0.43-12.02-2.74-8.78-4.61-6.19C-0.50-14.76 4.97-23.47 10.22-31.10C14.47-33.91 22.54-39.31 30.67-45.50C40.90-53.35 48.02-59.98 51.98-65.30C52.06-65.45 54.79-69.26 53.14-72.72C52.63-73.73 51.70-74.59 50.62-74.95C49.32-75.38 47.81-75.24 46.15-74.45C44.71-73.73 41.33-70.70 36.94-66.02C32.04-60.91 26.42-54.43 21.24-47.95C16.92-42.55 12.89-37.22 9.29-32.04L8.93-31.54C7.34-29.16 5.76-26.86 4.25-24.55C-1.44-15.62-5.76-7.42-8.50-0.29ZM49.10-73.94C50.62-74.02 51.70-72.94 51.98-72.14C53.28-69.41 50.98-66.17 50.90-66.10C42.84-55.15 22.03-40.54 12.31-33.98C15.98-39.17 19.44-43.70 22.25-47.09C33.84-61.56 44.28-72.14 46.73-73.30C47.81-73.80 48.38-73.94 49.10-73.94ZM59.04-0.94C65.59 2.59 77.26 0 83.74-2.38C91.66-5.62 98.35-9.00 107.78-16.99C108-17.28 108.07-17.64 107.86-17.93C107.57-18.22 107.21-18.22 106.92-18.00C97.78-10.15 91.01-6.70 83.30-3.53C79.20-1.87 66.10 1.58 59.76-2.02C51.62-6.48 57.67-20.02 62.14-24.26C62.78-23.98 63.58-23.62 64.44-23.26C67.68-21.89 72.94-20.16 79.20-19.87C85.32-19.58 93.31-22.03 96.70-27.79C101.16-35.35 93.24-40.90 85.32-39.89C78.77-39.02 71.71-35.50 65.23-29.23C64.08-28.08 62.86-27.00 61.85-25.92C60.34-26.64 59.47-27.22 59.47-27.22C59.18-27.43 58.75-27.36 58.54-27.07C58.39-26.78 58.46-26.35 58.75-26.21C58.75-26.14 59.54-25.63 60.91-24.91C55.66-19.44 50.33-5.69 59.04-0.94ZM63-25.27C64.01-26.35 65.09-27.36 66.02-28.30C74.09-35.78 79.99-37.87 85.54-38.66C92.45-39.67 99.29-34.70 95.62-28.51C92.95-24.05 85.68-20.88 79.20-21.17C73.15-21.46 68.11-23.11 64.94-24.41ZM110.74 0.65C112.25 0.65 114.12 0.50 116.06-0.07C128.38-3.60 136.08-8.28 145.66-15.55C145.94-15.77 145.94-16.20 145.73-16.49C145.51-16.70 145.08-16.78 144.79-16.56C135.43-9.36 127.80-4.97 115.78-1.37C111.96-0.22 107.86-0.14 105.62-2.59C103.39-5.11 104.98-9.65 104.98-9.65C105.98-12.31 107.21-15.05 108.58-17.86C120.02-25.63 130.97-33.77 136.44-38.59C141.41-42.98 146.38-48.46 150.05-53.50C153.07-57.74 156.67-63.58 156.31-67.82C156.17-69.55 155.45-70.85 154.08-71.71C152.42-72.79 150.26-72.79 147.67-71.64C145.73-70.85 143.57-69.34 141.12-67.25C137.09-63.79 133.78-59.76 133.78-59.69L133.78-59.69C133.70-59.62 128.09-52.34 121.61-42.62C115.70-33.62 107.35-20.38 103.75-10.15C103.68-9.94 101.88-4.82 104.62-1.73C105.91-0.22 107.86 0.65 110.74 0.65ZM134.78-58.90L134.78-58.90C134.93-59.04 138.10-62.93 141.98-66.31C145.51-69.34 150.34-72.58 153.36-70.63C154.37-69.98 154.94-69.05 155.02-67.68C155.23-64.73 153.14-59.98 149.04-54.29C145.37-49.25 140.47-43.92 135.58-39.60C130.54-35.14 120.31-27.50 109.80-20.23C113.76-27.94 118.66-35.78 122.69-41.90C129.10-51.41 134.57-58.68 134.78-58.90ZM149.11 0.65C150.62 0.65 152.50 0.50 154.44-0.07C166.75-3.60 174.46-8.28 184.03-15.55C184.32-15.77 184.32-16.20 184.10-16.49C183.89-16.70 183.46-16.78 183.17-16.56C173.81-9.36 166.18-4.97 154.15-1.37C150.34-0.22 146.23-0.14 144-2.59C141.77-5.11 143.35-9.65 143.35-9.65C144.36-12.31 145.58-15.05 146.95-17.86C158.40-25.63 169.34-33.77 174.82-38.59C179.78-42.98 184.75-48.46 188.42-53.50C191.45-57.74 195.05-63.58 194.69-67.82C194.54-69.55 193.82-70.85 192.46-71.71C190.80-72.79 188.64-72.79 186.05-71.64C184.10-70.85 181.94-69.34 179.50-67.25C175.46-63.79 172.15-59.76 172.15-59.69L172.15-59.69C172.08-59.62 166.46-52.34 159.98-42.62C154.08-33.62 145.73-20.38 142.13-10.15C142.06-9.94 140.26-4.82 142.99-1.73C144.29-0.22 146.23 0.65 149.11 0.65ZM173.16-58.90L173.16-58.90C173.30-59.04 176.47-62.93 180.36-66.31C183.89-69.34 188.71-72.58 191.74-70.63C192.74-69.98 193.32-69.05 193.39-67.68C193.61-64.73 191.52-59.98 187.42-54.29C183.74-49.25 178.85-43.92 173.95-39.60C168.91-35.14 158.69-27.50 148.18-20.23C152.14-27.94 157.03-35.78 161.06-41.90C167.47-51.41 172.94-58.68 173.16-58.90ZM193.54 0.72C196.56 0.72 200.16-0.22 203.90-2.23C207.43-4.10 211.18-6.91 214.78-10.22C216.14-11.52 217.51-12.89 218.81-14.33C222.34-10.58 227.66-9.00 232.99-9.50C237.53-9.94 241.99-11.88 246.10-15.05C246.38-15.26 246.38-15.62 246.17-15.91C245.95-16.20 245.52-16.27 245.23-16.06C236.95-9.50 226.22-8.64 219.67-15.34C221.04-16.85 222.34-18.50 223.49-20.09C225.86-23.47 227.52-26.50 228.10-28.58C228.17-28.87 228.96-32.04 227.66-33.48C227.23-33.98 226.66-34.34 226.01-34.49C226.15-34.70 226.15-34.99 226.01-35.28C225.94-35.35 224.42-37.44 220.97-38.66C218.95-39.38 216.58-39.60 214.13-39.46C211.18-39.24 208.01-38.38 204.48-36.86C200.38-34.99 195.55-31.61 191.59-27.79C188.28-24.55 183.96-19.51 182.45-13.68C182.45-13.46 180.94-7.56 184.03-3.31C185.83-0.86 188.78 0.50 192.82 0.72ZM215.71-38.23C217.44-38.23 219.24-37.87 220.46-37.51C222.91-36.79 224.50-35.06 224.86-34.63C224.50-34.63 224.14-34.63 223.70-34.56C222.05-34.27 220.46-33.34 219.24-31.82C218.09-30.46 217.30-28.58 216.79-26.50C216.22-23.90 216.22-21.10 216.79-18.65C217.08-17.50 217.51-16.42 218.09-15.48C216.72-13.97 215.35-12.53 213.84-11.16C206.28-4.10 198.65-0.22 192.89-0.58C189.29-0.72 186.70-1.94 185.11-4.03C182.38-7.78 183.74-13.32 183.74-13.32C186.26-23.26 197.93-32.54 204.98-35.64C208.87-37.37 212.62-38.23 215.71-38.23ZM224.86-33.34C225.65-33.34 226.30-33.12 226.66-32.69C227.45-31.75 227.02-29.74 226.87-29.02C226.01-25.70 222.98-21.17 218.95-16.49C217.51-19.30 217.37-23.11 218.02-26.21C219.02-30.67 221.54-33.26 224.86-33.34Z"
  />
</svg>

现在，显然没有人能像那样画画(除非他们是 Octopus )。

问题出在路径上，但我找不到实现此目的的替代方法。 Inkscape，也许？无论如何，路径是由以下内容生成的:https://www.npmjs.com/package/text-to-svg , 使用 League Script 字体来自:http://www.quillingpatch.com/2015/01/31/list-of-free-single-line-fonts-for-rhinestones-pensmarkers/ . text-to-svg 可以完成这项工作，但它不适合这个目的。其他一些问题:

• League Script 应该是单行字体，但是好像用了fill。我研究了 Hershey 字体、雕刻字体，但我还没有找到可以生成适合动画绘图的路径的东西。
• path.getTotalLength 返回的长度比实际长度长得多，因为绘制完成的时间比 length 达到 0 的时间早得多.很可能是由路径的方式引起的。
• 路径需要转换为任意值，因为它包含负值(如上述 CSS 中所示)。是否有比解析数据以找到最低负 X 和 Y 值然后按该数量转换它更好的方法来解决此问题？

建议？

Answer 1

如您所说，您使用的字体似乎 是单行。但实际上并非如此。字符中的路径围绕字体字形的边界

所有字体都是如此。因此，任何文本到 SVG 实用程序都不适合您。

您几乎肯定必须自己将 SVG 转换为合适的格式。将转换后的 SVG 加载到 Inkscape(或您最喜欢的矢量编辑器)中，并使用单个(非填充)路径手动跟踪每个字母的形状。

然后您将拥有一个可与破折号偏移动画配合使用的 SVG。