SVG: Support Masking

[irwant]

this is a feature need implemented to the SVG animation. I have sample project original SVG animation exported from Friction, and SVG animation a little bit manual edit the code to implemented masking.

masking svg.zip

Original SVG before masking

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Friction - https://friction.graphics -->

<svg viewBox="0 0 1920 1080" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(53.4124 53.4124)">
  <g>
   <animateTransform keySplines="0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1" type="translate" repeatCount="indefinite" keyTimes="0;0.1;0.25;0.6;0.69;1" dur="3.33333s" values="277.087 603.817;277.087 603.817;724.019 603.817;724.019 603.817;244.019 603.817;244.019 603.817" attributeName="transform" calcMode="spline"/>
   <g>
    <animateTransform keySplines="0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1" type="rotate" repeatCount="indefinite" keyTimes="0;0.3;0.35;0.4;0.45;0.5;0.55;1" dur="3.33333s" values="0;0;12;0;12;0;12;12" attributeName="transform" calcMode="spline"/>
    <g transform="scale(1 1)">
     <g transform="skewX(0) skewY(0)">
      <g opacity="1" transform="translate(-53.4124 -53.4124)">
       <path stroke-linecap="round" fill="rgba(219, 163, 98, 1)" stroke-linejoin="round" stroke="none" stroke-width="2" d="M19.8784 19.8784C19.8784 19.8784 195.6 -111.913 195.6 -111.913C195.6 -111.913 124.325 -178.668 153.399 -216.465C182.474 -254.263 231.901 -254.263 243.531 -219.373C255.161 -184.483 258.631 -161.573 277.731 -169.214C296.831 -176.854 298.741 -201.684 312.112 -228.424C325.482 -255.164 363.682 -293.365 403.792 -270.445C443.903 -247.524 399.972 -182.584 399.972 -182.584C399.972 -182.584 470.643 -243.704 506.934 -186.404C543.224 -129.103 428.623 -106.183 428.623 -106.183C428.623 -106.183 522.214 -102.363 505.024 -37.4222C487.833 27.5185 411.433 -6.86184 392.332 -4.95182C373.232 -3.0418 302.561 6.5083 281.551 16.0584C260.541 25.6085 119.379 83.285 86.7291 92.4592C54.0792 101.633 -40.8644 62.9661 19.8784 19.8784Z"/>
      </g>
     </g>
    </g>
   </g>
  </g>
 </g>
 <g transform="translate(314.703 397.248)">
  <g transform="translate(506.122 245.303)">
   <g transform="rotate(0)">
    <g transform="scale(1 1)">
     <g transform="skewX(0) skewY(0)">
      <g opacity="1" transform="translate(-314.703 -397.248)">
       <path stroke-linecap="round" fill="rgba(149, 62, 6, 1)" stroke-linejoin="round" stroke="none" stroke-width="2" d="M291.487 794.496C291.487 794.496 291.487 0 291.487 0C291.487 0 337.919 0 337.919 0C337.919 0 337.919 794.496 337.919 794.496C337.919 794.496 291.487 794.496 291.487 794.496Z"/>
      </g>
     </g>
    </g>
   </g>
  </g>
 </g>
 <!--this is a part before masking. this part need move to implemented as masking -->
 <g transform="translate(125.107 397.248)">
  <g transform="translate(931.522 190.202)">
   <g transform="rotate(0)">
    <g transform="scale(1 1)">
     <g transform="skewX(0) skewY(0)">
      <g opacity="1" transform="translate(-125.107 -397.248)">
       <path stroke-linecap="round" fill="rgba(255, 255, 255, 1)" stroke-linejoin="round" stroke="none" stroke-width="2" d="M-87.7041 794.496C-87.7041 794.496 -87.7041 0 -87.7041 0C-87.7041 0 337.919 0 337.919 0C337.919 0 337.919 794.496 337.919 794.496C337.919 794.496 -87.7041 794.496 -87.7041 794.496Z"/>
      </g>
     </g>
    </g>
   </g>
  </g>
 </g>
<!--this is a part before masking -->
 <defs/>
</svg>

Edited SVG after masking

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Friction - https://friction.graphics -->

<svg viewBox="0 0 1920 1080" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<g style="mask:url(#masking)"> <!--adding grup style to masking this shape-->
 <g transform="translate(53.4124 53.4124)">
  <g>
   <animateTransform keySplines="0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1" type="translate" repeatCount="indefinite" keyTimes="0;0.1;0.25;0.6;0.69;1" dur="3.33333s" values="277.087 603.817;277.087 603.817;724.019 603.817;724.019 603.817;244.019 603.817;244.019 603.817" attributeName="transform" calcMode="spline"/>
   <g>
    <animateTransform keySplines="0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1" type="rotate" repeatCount="indefinite" keyTimes="0;0.3;0.35;0.4;0.45;0.5;0.55;1" dur="3.33333s" values="0;0;12;0;12;0;12;12" attributeName="transform" calcMode="spline"/>
    <g transform="scale(1 1)">
     <g transform="skewX(0) skewY(0)">
      <g opacity="1" transform="translate(-53.4124 -53.4124)">
       <path stroke-linecap="round" fill="rgba(219, 163, 98, 1)" stroke-linejoin="round" stroke="none" stroke-width="2" d="M19.8784 19.8784C19.8784 19.8784 195.6 -111.913 195.6 -111.913C195.6 -111.913 124.325 -178.668 153.399 -216.465C182.474 -254.263 231.901 -254.263 243.531 -219.373C255.161 -184.483 258.631 -161.573 277.731 -169.214C296.831 -176.854 298.741 -201.684 312.112 -228.424C325.482 -255.164 363.682 -293.365 403.792 -270.445C443.903 -247.524 399.972 -182.584 399.972 -182.584C399.972 -182.584 470.643 -243.704 506.934 -186.404C543.224 -129.103 428.623 -106.183 428.623 -106.183C428.623 -106.183 522.214 -102.363 505.024 -37.4222C487.833 27.5185 411.433 -6.86184 392.332 -4.95182C373.232 -3.0418 302.561 6.5083 281.551 16.0584C260.541 25.6085 119.379 83.285 86.7291 92.4592C54.0792 101.633 -40.8644 62.9661 19.8784 19.8784Z"/>
      </g>
     </g>
    </g>
   </g>
  </g>
 </g>
 </g> <!--close grup style masking-->
 <g transform="translate(314.703 397.248)">
  <g transform="translate(506.122 245.303)">
   <g transform="rotate(0)">
    <g transform="scale(1 1)">
     <g transform="skewX(0) skewY(0)">
      <g opacity="1" transform="translate(-314.703 -397.248)">
       <path stroke-linecap="round" fill="rgba(149, 62, 6, 1)" stroke-linejoin="round" stroke="none" stroke-width="2" d="M291.487 794.496C291.487 794.496 291.487 0 291.487 0C291.487 0 337.919 0 337.919 0C337.919 0 337.919 794.496 337.919 794.496C337.919 794.496 291.487 794.496 291.487 794.496Z"/>
      </g>
     </g>
    </g>
   </g>
  </g>
 </g>

 <defs>

    <mask id ="masking">
<!--this part after moving and ready to use as masking-->
 <g transform="translate(125.107 397.248)">
  <g transform="translate(931.522 190.202)">
   <g transform="rotate(0)">
    <g transform="scale(1 1)">
     <g transform="skewX(0) skewY(0)">
      <g opacity="1" transform="translate(-125.107 -397.248)">
       <path stroke-linecap="round" fill="rgba(255, 255, 255, 1)" stroke-linejoin="round" stroke="none" stroke-width="2" d="M-87.7041 794.496C-87.7041 794.496 -87.7041 0 -87.7041 0C-87.7041 0 337.919 0 337.919 0C337.919 0 337.919 794.496 337.919 794.496C337.919 794.496 -87.7041 794.496 -87.7041 794.496Z"/>
      </g>
     </g>
    </g>
   </g>
  </g>
 </g>
        </mask>
</svg>

[rodlie]

Thanks for the report. This might be a bit complicated to implement.

First, when to mask? If something is in a layer and we have a (src/dst) blend then apply some kind of masking in SVG?

Here we use a basic DstIn, this would qualify for masking:

masking.mp4

[rodlie]

References:

• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking
• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask
• https://www.w3.org/TR/2000/WD-SVG-20000629/masking.html

[rodlie]

Proof-of-concept exported directly from Friction:

[rodlie]

Docs: https://github.com/friction2d/friction2d.github.io/blob/main/documentation/tutorial-masking.md
Test build: https://sourceforge.net/projects/friction/files/snapshots/0.9.6.1-6526e553/

[irwant]

good Job. That working out of the box.
I excited wait for the release also will be testing beta version 1

[rodlie]

Feature has also been backported to v0.9, didn't need any major code changes (just had to figure out the logic).