.Hello guys,
I'm here because I'm struggling with an animation I'm making.
Basically I've got two SVG, one is the paths one is the image made of many small pieces.
Each piece should follow a single path to then return to the original position to be able to see the full picture all together.
I'm using Angular and there's a function to get piece's offsets X and Y that return the number.
It happens strangely that, whenever I put the offset the pieces aren't visible, they disappear, while with the inspection and console in the browser they are shown somewhere in the page.
I'm adding the two files as attachments, one .ts and one .html
The final effect as I said is with a timeline to start moving every single piece following a certain path into the original position, all starting at the same time, to recreate the initial image.
The image is made of subdivisions of <g> <image base64> all called by Id="cls-number"
And the rectangul that I'd like to move is defined at the beginning in a tag called <def> you'll see in the attachment.
I couldn't find any solution
I tried using in the path property both the SVG path and the ID of the element,
the <g> <image base64 > is not even shown in the inspection with a certain position.. so I could catch them only from <Def> --><tag id ="clip-path-number" > --> <rect>
Now they disappear, making some trials with a div instead and writing..
In the tl.to {( "div" ... path: "#A",
align: "#A" you can see it moving without getting to the initial position
Is it because the paths and the SVG image are different and I should link the paths and the pieces with Illustrator?
Is there another faster solution?
Thank you so much, I appreciate your time.
Files as attachments
Update
The html file is too large I'll put here snippets
<div>
<div
id="P1"
style="
z-index: 3;
background-color: red;
position: absolute;
top: 400px;
left: 200px;
display: block;
height: 50px;
width: 50px;
"
>
CIAO
</div>
<svg
style="width: 80%; height: auto; opacity: 0.85; overflow: visible"
id="glass"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 827.76 470.16"
>
<defs>
<style>
#cls-1 {
fill: none;
}
#cls-2 {
clip-path: url(#clip-path);
}
#cls-3 {
clip-path: url(#clip-path-2);
}
#cls-4 {
clip-path: url(#clip-path-3);
}
#cls-5 {
clip-path: url(#clip-path-4);
}
Etc.. till #cls-34
</style>
<clipPath id="clip-path" transform="translate(-180.48 -157.92)">
<rect class="cls-1" width="1224" height="792" />
</clipPath>
<clipPath id="clip-path-2" transform="translate(-180.48 -157.92)">
<rect
class="cls-1"
x="201.84"
y="178.08"
width="98.4"
height="100.56"
/>
</clipPath>
<clipPath id="clip-path-3" transform="translate(-180.48 -157.92)">
<rect
class="cls-1"
x="185.28"
y="216"
width="102.96"
height="139.92"
/>
</clipPath>
<clipPath id="clip-path-4" transform="translate(-180.48 -157.92)">
<rect
class="cls-1"
x="261.36"
y="172.56"
width="107.52"
height="140.16"
/>
</clipPath>
<clipPath id="clip-path-5" transform="translate(-180.48 -157.92)">
<rect
class="cls-1"
x="359.28"
y="178.56"
width="151.68"
height="137.28"
/>
Etc..
With then..
</defs>
<title>broken_pieces</title>
<g class="cls-2">
<g id="cls-3">
<image
width="410"
height="419"
transform="translate(21.36 20.16) scale(0.24)"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZoAAAGjCAYAAAAVc9MGAAAACXBIWXMAAC4jAAAuIwF4pT92AAAgAElEQVR4Xuy9W6ws2Xnf919V1d1773POTEgOZ0aKRFKiQEq0EIWKQkg8IWcOowTkg2HoxQjgAHkIgrxQLwngB79ISYA8ODAMR
Etc.. /> repeated many times
</SVG>
And the SVG of the paths is this
<svg
style="position: absolute; top: -350; left: 50"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1177.544 1177.689"
>
<defs>
<style>
.clss-1,
.clss-2 {
fill: #fff;
visibility: hidden;
}
.clss-1,
.clss-3 {
stroke: #000;
stroke-miterlimit: 10;
}
.clss-3 {
fill: none;
visibility: hidden;
}
</style>
</defs>
<title>motionPath</title>
<g data-name="Layer 1">
<path
id="A"
class="clss-1"
d="M529.5,591.5c22.669-75.258,103.207-307.484,330-432,277.264-152.226,678.576-91.563,743,75,38.4,99.286-44.809,231.264-133,296-167.08,122.644-443.526,71.105-493-57-33.461-86.642,31.011-223.557,139-270,74.81-32.174,196.507-32.112,239,42,29.286,51.078,7.086,113.146,0,131"
transform="translate(-512.872 232.263)"
/>
</g>
<g id="B" data-name="Layer 2">
<path
class="clss-1"
d="M615.826,731.494c5.364-78.415,32.238-322.736,225.659-494.573C1077.95,26.844,1482.7-3.263,1582.557,144.8c59.521,88.259,7.746,235.437-63.839,318.166-135.62,156.731-416.6,167.965-493.33,54.07-51.892-77.03-19.484-224.855,75.471-294.151,65.781-48.006,184.444-75.01,242.355-12.2,39.913,43.285,32.073,108.736,29.135,127.719"
transform="translate(-512.872 232.263)"
/>
</g>
Repeated till... Id="ZD"
Can someone help me figuring this out?
Thanks a lot
welcome-view.component.ts