我有以下漂亮的 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>如您所見，中間的兩個paths 充當“面具”，它僅適用于該特定顏色的背景。我想把這兩條路徑做成一個遮罩，它只覆寫綠色路徑（第一條路徑）而不是黑色圓圈（最后一條路徑），并且不管背景顏色如何都會顯示背景。我咨詢了這個答案，但不能完全使它起作用，我嘗試了以下方法：
<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>正如你所看到的，這對我來說是不可以的。
任何幫助，將不勝感激。:)
uj5u.com熱心網友回復：
你的意思是這樣的嗎？
<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 中，您有兩種方法來屏蔽物件：
<mask>: 類似于基于像素的 alpha 通道——白色=不透明；黑色=透明。
透明度級別實際上是基于蒙版元素的填充或描邊顏色的亮度/亮度。
因此，您不僅限于灰度值——但它當然更容易應用。
您還可以定義半透明區域，例如通過將填充顏色設定為：
fill="#7f7f7f"– 將導致 50% 的透明度。它與Photoshop中基于alpha通道的圖層蒙版非常相似。<clipPath>：基于物體形狀（路徑、圓形、矩形）。
因此，筆觸寬度或樣式不會對裁剪/裁剪產生任何影響
另請參閱 Sara Soueidan 的文章： CSS 和 SVG 中的裁剪 — clip-path 屬性和元素
在您的情況下，您可以將“綠色回圈”形狀添加到具有白色筆觸顏色的遮罩元素組中。2個間隙元素需要是黑色的。
編輯：更正了一些關于 clipPath 的誤導性資訊
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/343504.html