I have the following nice SVG animation:
<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>As you can see, the middle two paths act as a "mask" and it only works on background of that particular color.
I would like to make these two paths into an mask, that only covers the green path (the first path) but not the black circle (the last path), and would show the background regardless of background color.
I consulted this answer but couldn't quite make it work, I tried the following:
<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>As you can see, it's a no for me.
Any help would be appreciated. :)
CodePudding user response：
Do you mean something like this?
<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>In svg you have 2 methods to mask object:
<mask>: similar to pixel based alpha channels – white=opaque; black=transparent.
The level of transparancy is actually based on the luminance/brightness of your mask element's fill or stroke color.
So you're not restricted to grayscale values – but it's certainly easier to apply.
You can also define semitranspareant areas e.g by setting a fill color to:
fill="#7f7f7f"– would result in a 50% transparency. Its pretty similar to the alpha channel based layer masks in photoshop.<clipPath>: based on solid shapes (path, circle, rect).
So stroke widths or styles won't have any effect on cropping/clipping
See also Sara Soueidan's article: Clipping in CSS and SVG — The clip-path Property and Element
In your case you might add the "green loop" shape to your mask element group with a white stroke color. The 2 gap elements need to be black.
Edit: corrected some misleading infos concerning clipPath