如何将这些 SVG 路径制作成遮罩？
How To Make These SVG Paths Into a Cover Mask?
我有以下漂亮的 SVG 动画：
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 480 480"
shape-rendering="geometricPrecision"
text-rendering="geometricPrecision"
>
<path
d="M212.301 116.454C117.17 75.477 85.397 161.388 85.397 161.388c-31.583 81.363 79.844 143.104 203.91 106.082 72.075-21.508 170.094-119.464 91.715-169.09C343.129 74.387 276.632 85.674 240 148.006c-16.712 28.435-24.986 71.486-28.623 106.278-10.408 99.545 59.697 150.49 97.717 139.4 38.02-11.09 62.202-60.36 38.02-134.828-20.676-63.677-80.76-119.12-134.813-142.402Z"
fill="none"
stroke="#5DD9A5"
stroke-width="39"
stroke-linecap="round"
stroke-dashoffset="-11"
stroke-dasharray="1400,102.08"
>
<animate
attributeName="stroke-dashoffset"
dur="3s"
values="-11;1491.08"
repeatCount="indefinite"
/>
</path>
<path
d="M178.292 234.55q41.56 18.38 94.506 5.09"
transform="matrix(1.00303 -.0538 .05355 .99857 -22.686 18.116)"
fill="none"
stroke="#e5e7eb"
stroke-width="20"
/>
<path
d="M233.109 230.572q-39.914 22.279-72.587 66.106"
transform="matrix(.66726 -.03579 .05355 .99857 77.947 -129.12)"
fill="none"
stroke="#e5e7eb"
stroke-width="25"
/>
<path
d="M212.301 116.454C117.17 75.477 85.397 161.388 85.397 161.388c-31.583 81.363 79.844 143.104 203.91 106.082 72.075-21.508 170.094-119.464 91.715-169.09C343.129 74.387 276.632 85.674 240 148.006c-16.712 28.435-24.986 71.486-28.623 106.278-10.408 99.545 59.697 150.49 97.717 139.4 38.02-11.09 62.202-60.36 38.02-134.828-20.676-63.677-80.76-119.12-134.813-142.402Z"
fill="none"
stroke="#000"
stroke-width="39"
stroke-linecap="round"
stroke-dashoffset="29"
stroke-dasharray="0,1490"
>
<animate
attributeName="stroke-dashoffset"
dur="3s"
values="29;1531.08"
repeatCount="indefinite"
/>
</path>
</svg>
如您所见，中间的两个 path 充当“遮罩”，它仅适用于该特定颜色的背景。
我想将这两条路径做成一个蒙版，只覆盖绿色路径（第一条路径）而不覆盖黑色圆圈（最后一条路径），并且无论背景颜色如何都会显示背景。
我咨询了 this answer 但无法完全实现，我尝试了以下方法：
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 480 480"
shape-rendering="geometricPrecision"
text-rendering="geometricPrecision"
>
<defs>
<mask id="mask">
<path
d="M178.292 234.55q41.56 18.38 94.506 5.09"
transform="matrix(1.00303 -.0538 .05355 .99857 -22.686 18.116)"
fill="none"
stroke="#e5e7eb"
stroke-width="20"
/>
<path
d="M233.109 230.572q-39.914 22.279-72.587 66.106"
transform="matrix(.66726 -.03579 .05355 .99857 77.947 -129.12)"
fill="none"
stroke="#e5e7eb"
stroke-width="25"
/>
</mask>
</defs>
<path
d="M212.301 116.454C117.17 75.477 85.397 161.388 85.397 161.388c-31.583 81.363 79.844 143.104 203.91 106.082 72.075-21.508 170.094-119.464 91.715-169.09C343.129 74.387 276.632 85.674 240 148.006c-16.712 28.435-24.986 71.486-28.623 106.278-10.408 99.545 59.697 150.49 97.717 139.4 38.02-11.09 62.202-60.36 38.02-134.828-20.676-63.677-80.76-119.12-134.813-142.402Z"
fill="none"
stroke="#5DD9A5"
stroke-width="39"
stroke-linecap="round"
stroke-dashoffset="-11"
stroke-dasharray="1400,102.08"
mask="url(#mask)"
>
<animate
attributeName="stroke-dashoffset"
dur="3s"
values="-11;1491.08"
repeatCount="indefinite"
/>
</path>
<path
d="M212.301 116.454C117.17 75.477 85.397 161.388 85.397 161.388c-31.583 81.363 79.844 143.104 203.91 106.082 72.075-21.508 170.094-119.464 91.715-169.09C343.129 74.387 276.632 85.674 240 148.006c-16.712 28.435-24.986 71.486-28.623 106.278-10.408 99.545 59.697 150.49 97.717 139.4 38.02-11.09 62.202-60.36 38.02-134.828-20.676-63.677-80.76-119.12-134.813-142.402Z"
fill="none"
stroke="#000"
stroke-width="39"
stroke-linecap="round"
stroke-dashoffset="29"
stroke-dasharray="0,1490"
>
<animate
attributeName="stroke-dashoffset"
dur="3s"
values="29;1531.08"
repeatCount="indefinite"
/>
</path>
</svg>
如你所见，这对我来说是不行的。
如有任何帮助，我们将不胜感激。 :)
你的意思是这样的吗？
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 480 480"
shape-rendering="geometricPrecision"
text-rendering="geometricPrecision"
>
<defs>
<mask id="mask">
<path
d="M212.301 116.454C117.17 75.477 85.397 161.388 85.397 161.388c-31.583 81.363 79.844 143.104 203.91 106.082 72.075-21.508 170.094-119.464 91.715-169.09C343.129 74.387 276.632 85.674 240 148.006c-16.712 28.435-24.986 71.486-28.623 106.278-10.408 99.545 59.697 150.49 97.717 139.4 38.02-11.09 62.202-60.36 38.02-134.828-20.676-63.677-80.76-119.12-134.813-142.402Z"
fill="none"
stroke="#fff"
stroke-width="39"
stroke-linecap="round"
/>
<path
d="M178.292 234.55q41.56 18.38 94.506 5.09"
transform="matrix(1.00303 -.0538 .05355 .99857 -22.686 18.116)"
fill="none"
stroke="#000"
stroke-width="20"
/>
<path
d="M233.109 230.572q-39.914 22.279-72.587 66.106"
transform="matrix(.66726 -.03579 .05355 .99857 77.947 -129.12)"
stroke-linecap="round"
fill="none"
stroke="#000"
stroke-width="25"
/>
</mask>
</defs>
<path
d="M212.301 116.454C117.17 75.477 85.397 161.388 85.397 161.388c-31.583 81.363 79.844 143.104 203.91 106.082 72.075-21.508 170.094-119.464 91.715-169.09C343.129 74.387 276.632 85.674 240 148.006c-16.712 28.435-24.986 71.486-28.623 106.278-10.408 99.545 59.697 150.49 97.717 139.4 38.02-11.09 62.202-60.36 38.02-134.828-20.676-63.677-80.76-119.12-134.813-142.402Z"
fill="none"
stroke="#5DD9A5"
stroke-width="39"
stroke-linecap="round"
stroke-dashoffset="-11"
stroke-dasharray="1400,102.08"
mask="url(#mask)"
>
<animate
attributeName="stroke-dashoffset"
dur="3s"
values="-11; 1491.08"
repeatCount="indefinite"
/>
</path>
<path id="spot"
d="M212.301 116.454C117.17 75.477 85.397 161.388 85.397 161.388c-31.583 81.363 79.844 143.104 203.91 106.082 72.075-21.508 170.094-119.464 91.715-169.09C343.129 74.387 276.632 85.674 240 148.006c-16.712 28.435-24.986 71.486-28.623 106.278-10.408 99.545 59.697 150.49 97.717 139.4 38.02-11.09 62.202-60.36 38.02-134.828-20.676-63.677-80.76-119.12-134.813-142.402Z"
fill="none"
stroke="#000"
stroke-width="39"
stroke-linecap="round"
stroke-dashoffset="29"
stroke-dasharray="0,1490"
>
<animate
attributeName="stroke-dashoffset"
dur="3s"
values="29; 1531.08"
repeatCount="indefinite"
/>
</path>
</svg>
在 svg 中，您有 2 种方法来屏蔽对象：
<mask>：类似于基于像素的 alpha 通道——白色=不透明；黑色=透明。
透明度级别实际上基于蒙版元素的填充或描边颜色的 luminance/brightness。
所以您不局限于灰度值 – 但应用起来肯定更容易。
您还可以定义半透明区域，例如将填充颜色设置为：
fill="#7f7f7f" – 将导致 50% 的透明度。它与 photoshop 中基于 alpha 通道的图层蒙版非常相似。<clipPath>：基于实体形状（路径、圆形、矩形）。
因此笔划宽度或样式不会对 cropping/clipping
产生任何影响
另请参阅 Sara Soueidan 的文章：
Clipping in CSS and SVG — The clip-path Property and Element
在您的情况下，您可以将“绿色环”形状添加到具有白色描边颜色的遮罩元素组。 2个间隙元素需要是黑色的。
编辑：更正了一些关于 clipPath 的误导性信息
我有以下漂亮的 SVG 动画：
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 480 480"
shape-rendering="geometricPrecision"
text-rendering="geometricPrecision"
>
<path
d="M212.301 116.454C117.17 75.477 85.397 161.388 85.397 161.388c-31.583 81.363 79.844 143.104 203.91 106.082 72.075-21.508 170.094-119.464 91.715-169.09C343.129 74.387 276.632 85.674 240 148.006c-16.712 28.435-24.986 71.486-28.623 106.278-10.408 99.545 59.697 150.49 97.717 139.4 38.02-11.09 62.202-60.36 38.02-134.828-20.676-63.677-80.76-119.12-134.813-142.402Z"
fill="none"
stroke="#5DD9A5"
stroke-width="39"
stroke-linecap="round"
stroke-dashoffset="-11"
stroke-dasharray="1400,102.08"
>
<animate
attributeName="stroke-dashoffset"
dur="3s"
values="-11;1491.08"
repeatCount="indefinite"
/>
</path>
<path
d="M178.292 234.55q41.56 18.38 94.506 5.09"
transform="matrix(1.00303 -.0538 .05355 .99857 -22.686 18.116)"
fill="none"
stroke="#e5e7eb"
stroke-width="20"
/>
<path
d="M233.109 230.572q-39.914 22.279-72.587 66.106"
transform="matrix(.66726 -.03579 .05355 .99857 77.947 -129.12)"
fill="none"
stroke="#e5e7eb"
stroke-width="25"
/>
<path
d="M212.301 116.454C117.17 75.477 85.397 161.388 85.397 161.388c-31.583 81.363 79.844 143.104 203.91 106.082 72.075-21.508 170.094-119.464 91.715-169.09C343.129 74.387 276.632 85.674 240 148.006c-16.712 28.435-24.986 71.486-28.623 106.278-10.408 99.545 59.697 150.49 97.717 139.4 38.02-11.09 62.202-60.36 38.02-134.828-20.676-63.677-80.76-119.12-134.813-142.402Z"
fill="none"
stroke="#000"
stroke-width="39"
stroke-linecap="round"
stroke-dashoffset="29"
stroke-dasharray="0,1490"
>
<animate
attributeName="stroke-dashoffset"
dur="3s"
values="29;1531.08"
repeatCount="indefinite"
/>
</path>
</svg>
如您所见，中间的两个 path 充当“遮罩”，它仅适用于该特定颜色的背景。
我想将这两条路径做成一个蒙版，只覆盖绿色路径（第一条路径）而不覆盖黑色圆圈（最后一条路径），并且无论背景颜色如何都会显示背景。
我咨询了 this answer 但无法完全实现，我尝试了以下方法：
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 480 480"
shape-rendering="geometricPrecision"
text-rendering="geometricPrecision"
>
<defs>
<mask id="mask">
<path
d="M178.292 234.55q41.56 18.38 94.506 5.09"
transform="matrix(1.00303 -.0538 .05355 .99857 -22.686 18.116)"
fill="none"
stroke="#e5e7eb"
stroke-width="20"
/>
<path
d="M233.109 230.572q-39.914 22.279-72.587 66.106"
transform="matrix(.66726 -.03579 .05355 .99857 77.947 -129.12)"
fill="none"
stroke="#e5e7eb"
stroke-width="25"
/>
</mask>
</defs>
<path
d="M212.301 116.454C117.17 75.477 85.397 161.388 85.397 161.388c-31.583 81.363 79.844 143.104 203.91 106.082 72.075-21.508 170.094-119.464 91.715-169.09C343.129 74.387 276.632 85.674 240 148.006c-16.712 28.435-24.986 71.486-28.623 106.278-10.408 99.545 59.697 150.49 97.717 139.4 38.02-11.09 62.202-60.36 38.02-134.828-20.676-63.677-80.76-119.12-134.813-142.402Z"
fill="none"
stroke="#5DD9A5"
stroke-width="39"
stroke-linecap="round"
stroke-dashoffset="-11"
stroke-dasharray="1400,102.08"
mask="url(#mask)"
>
<animate
attributeName="stroke-dashoffset"
dur="3s"
values="-11;1491.08"
repeatCount="indefinite"
/>
</path>
<path
d="M212.301 116.454C117.17 75.477 85.397 161.388 85.397 161.388c-31.583 81.363 79.844 143.104 203.91 106.082 72.075-21.508 170.094-119.464 91.715-169.09C343.129 74.387 276.632 85.674 240 148.006c-16.712 28.435-24.986 71.486-28.623 106.278-10.408 99.545 59.697 150.49 97.717 139.4 38.02-11.09 62.202-60.36 38.02-134.828-20.676-63.677-80.76-119.12-134.813-142.402Z"
fill="none"
stroke="#000"
stroke-width="39"
stroke-linecap="round"
stroke-dashoffset="29"
stroke-dasharray="0,1490"
>
<animate
attributeName="stroke-dashoffset"
dur="3s"
values="29;1531.08"
repeatCount="indefinite"
/>
</path>
</svg>
如你所见，这对我来说是不行的。
如有任何帮助，我们将不胜感激。 :)
你的意思是这样的吗？
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 480 480"
shape-rendering="geometricPrecision"
text-rendering="geometricPrecision"
>
<defs>
<mask id="mask">
<path
d="M212.301 116.454C117.17 75.477 85.397 161.388 85.397 161.388c-31.583 81.363 79.844 143.104 203.91 106.082 72.075-21.508 170.094-119.464 91.715-169.09C343.129 74.387 276.632 85.674 240 148.006c-16.712 28.435-24.986 71.486-28.623 106.278-10.408 99.545 59.697 150.49 97.717 139.4 38.02-11.09 62.202-60.36 38.02-134.828-20.676-63.677-80.76-119.12-134.813-142.402Z"
fill="none"
stroke="#fff"
stroke-width="39"
stroke-linecap="round"
/>
<path
d="M178.292 234.55q41.56 18.38 94.506 5.09"
transform="matrix(1.00303 -.0538 .05355 .99857 -22.686 18.116)"
fill="none"
stroke="#000"
stroke-width="20"
/>
<path
d="M233.109 230.572q-39.914 22.279-72.587 66.106"
transform="matrix(.66726 -.03579 .05355 .99857 77.947 -129.12)"
stroke-linecap="round"
fill="none"
stroke="#000"
stroke-width="25"
/>
</mask>
</defs>
<path
d="M212.301 116.454C117.17 75.477 85.397 161.388 85.397 161.388c-31.583 81.363 79.844 143.104 203.91 106.082 72.075-21.508 170.094-119.464 91.715-169.09C343.129 74.387 276.632 85.674 240 148.006c-16.712 28.435-24.986 71.486-28.623 106.278-10.408 99.545 59.697 150.49 97.717 139.4 38.02-11.09 62.202-60.36 38.02-134.828-20.676-63.677-80.76-119.12-134.813-142.402Z"
fill="none"
stroke="#5DD9A5"
stroke-width="39"
stroke-linecap="round"
stroke-dashoffset="-11"
stroke-dasharray="1400,102.08"
mask="url(#mask)"
>
<animate
attributeName="stroke-dashoffset"
dur="3s"
values="-11; 1491.08"
repeatCount="indefinite"
/>
</path>
<path id="spot"
d="M212.301 116.454C117.17 75.477 85.397 161.388 85.397 161.388c-31.583 81.363 79.844 143.104 203.91 106.082 72.075-21.508 170.094-119.464 91.715-169.09C343.129 74.387 276.632 85.674 240 148.006c-16.712 28.435-24.986 71.486-28.623 106.278-10.408 99.545 59.697 150.49 97.717 139.4 38.02-11.09 62.202-60.36 38.02-134.828-20.676-63.677-80.76-119.12-134.813-142.402Z"
fill="none"
stroke="#000"
stroke-width="39"
stroke-linecap="round"
stroke-dashoffset="29"
stroke-dasharray="0,1490"
>
<animate
attributeName="stroke-dashoffset"
dur="3s"
values="29; 1531.08"
repeatCount="indefinite"
/>
</path>
</svg>
在 svg 中，您有 2 种方法来屏蔽对象：
<mask>：类似于基于像素的 alpha 通道——白色=不透明；黑色=透明。
透明度级别实际上基于蒙版元素的填充或描边颜色的 luminance/brightness。
所以您不局限于灰度值 – 但应用起来肯定更容易。
您还可以定义半透明区域，例如将填充颜色设置为：
fill="#7f7f7f"– 将导致 50% 的透明度。它与 photoshop 中基于 alpha 通道的图层蒙版非常相似。<clipPath>：基于实体形状（路径、圆形、矩形）。
因此笔划宽度或样式不会对 cropping/clipping
产生任何影响 另请参阅 Sara Soueidan 的文章： Clipping in CSS and SVG — The clip-path Property and Element
在您的情况下，您可以将“绿色环”形状添加到具有白色描边颜色的遮罩元素组。 2个间隙元素需要是黑色的。
编辑：更正了一些关于 clipPath 的误导性信息