javascript - 制作一个看起来像两个的 SVG 路径，但仍然有一个用于动画

Question

我正在尝试创建字母 E、D 和 S 的 SVG 动画。我在文件的其他地方有用于动画的 JavaScript，但它要求所有路径都在同一位置开始并分支到不同的方向来创建字母。

<svg viewBox="0 0 130.821 87.938">
	<linearGradient id="grad" x1="298" y1="0" x2="304" y2="0" gradientUnits="userSpaceOnUse">
		<stop stop-color="#ddd" offset="0"/>
		<stop stop-color="#111" offset="0.01"/>
		<stop stop-color="#111" offset="0.7"/>
		<stop stop-color="#ddd" offset="0.7"/>
	</linearGradient>
	<g fill="none" stroke="url(#grad)" stroke-width="7.408239999999999"">
		<path d="M14.947 22.795l.082 38.443c16.467-.275 32.951.438 49.406-.502 4.717-1.167 9.144-3.87 12.234-7.623 3.127-5.011 4.014-11.665 1.11-16.988-1.62-3.331-3.98-6.636-7.709-7.742-6.395-2.218-13.296-2.331-19.994-2.068l-.088 27.165"/>
		<path d="M14.936 22.795v20.618h21.458"/>
		<path d="M14.936 22.795v3.703h27.14"/>
		<path d="M14.947 22.795l.082 38.443c16.465-.275 32.966.437 49.406-.502 4.51-.99 8.986-4.004 11.765-6.974 2.592-3.606 8.862 1.661 12.762 3.464 5.917 3.374 13.532 6.138 20.063 2.836 4.74-3.09 4.01-11.262-1.241-13.442-5.428-3.361-12.293-3.772-17.28-7.94-2.658-4.75 1.018-11.315 6.37-11.826 5.538-1.305 10.999 1.337 15.726 3.934"/>
	</g>
</svg>

将其粘贴到一个 HTML 文件中，您会看到我在说什么，路径一开始是重叠的，但后来又 fork 了。现在它看起来像这样:

问题是，我需要在 S 和 D 之间休息一下。我的第一个想法是在字母之间画另一条线，颜色与我的背景相同。这样，动画的整个路径都是完整的，但用户只会看到分开的字母。由于我在页面上有一些模糊和阴影，结果不太好:

你可以清楚地看到我在 D 和 S 之间绘制的路径。如何在不破坏动画路径的情况下解决这个问题？我能想到几种可能的方法，但不知道如何实现其中任何一种。

1. 我怎样才能改变路径的描边颜色，中间路径？我可以将它更改为 D 末尾的背景颜色，然后在 S 开头恢复为正常的#eeeeee。
2. 可能我可以使黑色路径(可能在另一个 svg 中)高于浅灰色 svg(使用 z-index？)，但我应用于浅灰色 svg 的滤镜实际上高于黑色小路？这很难解释，但我只是问您是否可以将阴影 CSS 滤镜的 z-index 设置为与元素的其余部分不同。
3. 以某种方式设置黑色路径的透明度，使灰色 svg 的那部分不可见(我不知道这是否可行)。它就像一件 CSS 隐形斗篷。

我认为我实际上可以将灰色路径分成两部分，但我必须确定动画的时间才能使它真正看起来不错。页面中发生的事情比我解释的要多得多，因此需要很长时间才能正确处理。在我花 20 个小时处理尽可能多的像素之前，我很想听听大家的建议。

Answer 1

我想这就是您所需要的。使用您拥有的路径，我正在为该组创建一个掩码。我正在为动画使用 javascript 和 css。您的动画可能会有所不同。请看一下

let animatedPaths = Array.from(document.querySelectorAll("g path"));
animatedPaths.forEach(p=>{
  let l = p.getTotalLength();
  p.style.cssText = `stroke-dasharray:${l}; stroke-dashoffset:${l};`
  })

svg{border:1px solid; width:100vh}
svg g path{transition:stroke-dashoffset 3s;}
svg:hover g path{stroke-dashoffset:0!important}

<svg viewBox="0 0 130.821 87.938">
  <defs>
    <mask id="m">
       <path stroke="white" stroke-width="7.5"
          d="M14.936 22.795v3.703h27.14
                          M14.936 22.795v20.618h21.458
                          M14.947 22.795l.082 38.443c16.467-.275 32.951.438 49.406-.502 4.717-1.167 9.144-3.87 12.234-7.623 3.127-5.011 4.014-11.665 1.11-16.988-1.62-3.331-3.98-6.636-7.709-7.742-6.395-2.218-13.296-2.331-19.994-2.068l-.088 27.165
                          M14.947,22.795
                          L15.029,61.238
                          C31.494,60.963,47.995,61.675,64.435,60.736
                          C68.945,59.746,73.421,56.732,76.2,53.762
                          M88.962,57.226
                          C94.879,60.6,102.494,63.364,109.025,60.062
                          C113.765,56.972,113.035,48.8,107.784,46.62
                          C102.356,43.259,95.491,42.848,90.504,38.68
                          C87.846,33.93,91.522,27.365,96.874,26.854
                          C102.412,25.549,107.873,28.191,112.6,30.788" />
    </mask>
  </defs>
	<linearGradient id="grad" x1="298" y1="0" x2="304" y2="0" gradientUnits="userSpaceOnUse">
		<stop stop-color="#ddd" offset="0"/>
		<stop stop-color="#111" offset="0.01"/>
		<stop stop-color="#111" offset="0.7"/>
		<stop stop-color="#ddd" offset="0.7"/>
	</linearGradient>
	<g fill="none" stroke="url(#grad)" stroke-width="7.4" style="mask: url(#m)">
		<path d="M14.947 22.795l.082 38.443c16.467-.275 32.951.438 49.406-.502 4.717-1.167 9.144-3.87 12.234-7.623 3.127-5.011 4.014-11.665 1.11-16.988-1.62-3.331-3.98-6.636-7.709-7.742-6.395-2.218-13.296-2.331-19.994-2.068l-.088 27.165
     M14.936 22.795v20.618h21.458
		 M14.936 22.795v3.703h27.14
		 M14.947 22.795l.082 38.443c16.465-.275 32.966 .437 49.406-.502c4.51-.99 8.986-4.004 11.765-6.974 c2.592-3.606 8.862 1.661 12.762 3.464 c5.917 3.374 13.532 6.138 20.063 2.836 c4.74-3.09 4.01-11.262 -1.241-13.442c-5.428-3.361 -12.293-3.772 -17.28-7.94c-2.658-4.75 1.018-11.315 6.37-11.826 c5.538-1.305 10.999 1.337 15.726 3.934"/>
     
     <path d="M14.936 22.795v3.703h27.14" />
                                                         
     
     
     <path d="M14.936 22.795v20.618h21.458" />
    
    <path d="M14.947 22.795l.082 38.443c16.467-.275 32.951.438 49.406-.502 4.717-1.167 9.144-3.87 12.234-7.623 3.127-5.011 4.014-11.665 1.11-16.988-1.62-3.331-3.98-6.636-7.709-7.742-6.395-2.218-13.296-2.331-19.994-2.068l-.088 27.165" />
    </g>
    
    
    
    
   
	
</svg>