How to Blend overlapping SVG
Unsolved
QML and Qt Quick
-
I have two SVG files that I am animating, one is a fixed figure that is centered in the screen, while the other is a second shape coming from the bottom of the screen and ending up overlapping a bit on the first one:
Image { id: progressIconFix anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter source: "../../images/Progress2-01.svg" } Image { id: progressIcon y: screenHeight anchors.horizontalCenter: parent.horizontalCenter source: "../../images/Progress1-01.svg" states: State { name: "visible"; when: progressIcon.visible; PropertyChanges { target: progressIcon; y: progressIconFix.height + 180; } } transitions: Transition { from: ""; to: "visible"; reversible: true; ParallelAnimation { NumberAnimation { properties: "y"; duration: 1050; easing.type: Easing.InOutQuad; } } } }
I would like to make it so that when the second shape starts overlapping with the fixed one, the overlapped area (only the overlap) between the two gets blended with a "multiply" effect. If I use:
Blend { anchors.fill: progressIconFix source: progressIconFix foregroundSource: progressIcon mode: "multiply" }
The moving shape gets blended since the beginning in its entirety, but I would really like this effect to happen only when it overlaps the fixed one and only on the overlapping area of the two.
So the end result would be something like this:
Thanks in advance for your help!