How can I overlay two SVG images on top of each other? I have created a section with a container that contains a row.
The row has a class float-end, and within the row, there are two containers each containing an SVG.
I modified the CSS to position the SVGs absolutely, which worked but it resulted in a horizontal scroll bar. I've tried several solutions but haven't been able to resolve the issue.
Thank you in advance for your assistance!
body {
padding: 0 !important;
margin: 0 !important;
}
#svg1 {
position: absolute;
z-index: 2 !important;
filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
}
#svg2 {
position: absolute;
z-index: 1 !important;
filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
}
#svg2 path{
d:path('M2032.906,316.652c-29.922,11.176-125.248,135.8-176.452-11.575s-65.814-28.162-108.034-59.206-99.488-84.638-69.539-161.431S1754.629-21.08,1754.629-21.08h278.277');
animation: morph 5s infinite;
}
#svg2:hover path{
d:path:hover('M2032.906,299.7c-44.543,52.9-130.008,123.125-181.212-24.248s-72.743-22.043-103.274-29.58-81.155-90.923-56.907-164.4,63.116-102.55,63.116-102.55h278.277');
}
@keyframes morph {
0%, 100%{
d:path('M2032.906,316.652c-29.922,11.176-125.248,135.8-176.452-11.575s-65.814-28.162-108.034-59.206-99.488-84.638-69.539-161.431S1754.629-21.08,1754.629-21.08h278.277');
}
50%{
d:path('M2032.906,299.7c-44.543,52.9-130.008,123.125-181.212-24.248s-72.743-22.043-103.274-29.58-81.155-90.923-56.907-164.4,63.116-102.55,63.116-102.55h278.277')
}
}