制作一个看起来像两个的 SVG 路径，而仍然是一个用于动画的路径答案

【问题标题】：Making an SVG path that looks like two, while still one for animation制作一个看起来像两个的 SVG 路径，而仍然是一个用于动画的路径
【发布时间】：2020-01-07 16:45:01
【问题描述】：

我正在尝试创建字母 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 文件中，您会看到我所说的路径最初是重叠的，但会出现分支。现在它看起来像这样：

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

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

如何更改路径的描边颜色，中间路径？我可以在 D 的末尾将其更改为背景颜色，然后在 S 的开头恢复为正常的#eeeeee。
可能我可以使黑色路径（可能在另一个 svg 中）高于浅灰色 svg（使用 z-index？），但我应用于浅灰色 svg 的过滤器实际上高于黑色小路？这很难解释，但我只是想问您是否可以将阴影 CSS 过滤器的 z-index 设置为与元素的其余部分不同。
不知何故设置了黑色路径的透明度，使灰色 svg 的那部分不可见（我不知道这是否可能）。它就像一件 CSS 隐形斗篷。

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

【问题讨论】：

查看 SVG 遮罩或剪辑路径。它们使您可以屏蔽形状的一部分，而无需修改形状或在原始形状上浮动其他视觉元素。 developer.mozilla.org/en-US/docs/Web/SVG/Element/mask
还有 stroke-dash-array - 如果你计算出正确的数组，它应该把中断放在正确的位置。

标签： javascript html css animation svg

【解决方案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>

【讨论】：

谢谢！这正是我所需要的。