Flatten the transform property in SVG
I have created a vector in adobe XD and then I have exported it as an SVG file. The problem is that in the SVG file in group elements <g> there is inline transform property set like this
SO when I set an animated class to the element to animate my SVG it does not behave as expected. The animation occurs but the positioning of the element changes probably because the initial transform: translate property gets overwritten by new once that I pass via @keyframes in external CSS. How do I get around this?
I found a similar answer here But it's for Inkspsce I currently have access to Adobe Illustrator and Adobe XD only. Plus this answer was not very clear to me as I am not familiar with Inkspace. How do I flatten these transform: "translate " property while making sure the elements in SVG remain at their places by updating the d property in child elements of element
My SVG looks something like this before any @keyframe animation are applied
but as soon as I add an animation property to SVG element ( using intersection observer) let say I my code I am applying to element with id House, it just shifts from the original position as original transform property mentioned within SVG file gets overwritten by my own translation: transform property that I set in my @keframe animation in CSS
so after the animation, the SVG looks like this :
I have used auto-generated animation from animista
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow-x: hidden;
}
/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE and Edge */
body {
-ms-overflow-style: none;
}
#section2 {
position: relative;
background-color: #333;
height: auto;
width: 100%;
overflow-y: hidden;
}
/*second frame animation*/
/*second frame animation*/
/*second frame animation*/
/*second frame animation*/
/*second frame animation*/
/*making opacity of everything 0 before animation begains*/
#House {
opacity: 0;
}
/*ANIMATION ON HOUSE IS DEFINED HERE GENERRATED DFROM ANIMISTA*/
/*ANIMATION ON HOUSE IS DEFINED HERE GENERRATED DFROM ANIMISTA*/
/*ANIMATION ON HOUSE IS DEFINED HERE GENERRATED DFROM ANIMISTA*/
/*ANIMATION ON HOUSE IS DEFINED HERE GENERRATED DFROM ANIMISTA*/
/*ANIMATION ON HOUSE IS DEFINED HERE GENERRATED DFROM ANIMISTA*/
/*THIS CLKASS BELOW IS ADDED TO ELEMENT WITH ID "House" in html*/
.slide-in-bottom {
-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
/* ----------------------------------------------
* Generated by Animista on 2020-6-27 14:35:36
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-bottom
* ----------------------------------------
*/
@-webkit-keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
/*# sourceMappingURL=style.css.map */
/*CSS DEFINING CLIP PATH AND FILL FOR SVG NOT RELEVANT FOR THIS QUESTION*/
/*CSS DEFINING CLIP PATH AND FILL FOR SVG NOT RELEVANT FOR THIS QUESTION*/
/*CSS DEFINING CLIP PATH AND FILL FOR SVG NOT RELEVANT FOR THIS QUESTION*/
.cls-1 {
clip-path: url(#clip-winter_3);
}
.cls-2 {
stroke: #707070;
fill: url(#linear-gradient);
}
.cls-20, .cls-3 {
opacity: 0.85;
}
.cls-3 {
mix-blend-mode: darken;
isolation: isolate;
}
.cls-4 {
fill: #176d81;
}
.cls-33, .cls-5, .cls-6, .cls-7, .cls-8 {
fill: none;
}
.cls-5, .cls-6, .cls-7, .cls-8 {
stroke: #fff;
}
.cls-5 {
stroke-linecap: round;
}
.cls-5, .cls-6 {
stroke-width: 3px;
}
.cls-7 {
stroke-width: 2px;
}
.cls-9 {
fill: #0d3446;
}
.cls-10 {
fill: #71adb5;
}
.cls-11 {
fill: #2f2e41;
}
.cls-12 {
fill: url(#pattern);
}
.cls-13 {
fill: #b6d4d8;
}
.cls-14 {
fill: #bcd5d8;
}
.cls-15, .cls-20, .cls-24 {
fill: #3f3d56;
}
.cls-16 {
fill: #d0cde1;
}
.cls-17 {
fill: #ff6584;
}
.cls-18 {
fill: #6c63ff;
}
.cls-19 {
fill: #575a89;
}
.cls-21 {
fill: #e2e2e2;
}
.cls-22 {
fill: rgba(49,153,177,0.74);
opacity: 0.57;
}
.cls-23 {
fill: #fff;
}
.cls-24 {
opacity: 0.95;
}
.cls-25, .cls-29 {
fill: #3b9fb7;
}
.cls-26 {
fill: #4eb2c9;
}
.cls-27 {
fill: #e6e6e6;
}
.cls-28 {
fill: #9f616a;
}
.cls-29 {
opacity: 0.1;
}
.cls-30 {
fill: #c2848d;
}
.cls-31 {
fill: #c1828b;
}
.cls-32 {
stroke: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Winter</title>
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script src="/js/script.js"></script>
</head>
<body>
<section id="section2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1366 723">
<defs>
<linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#6bb2d0"/>
<stop offset="1" stop-color="#c7eafd"/>
</linearGradient>
<pattern id="pattern" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 1367 471">
<clipPath id="clip-winter_3">
<rect width="1366" height="723"/>
</clipPath>
</defs>
<g id="winter_3" data-name="winter – 3" class="cls-1">
<rect class="cls-23" width="1366" height="723"/>
<g id="SkyBackground" class="cls-2">
<rect class="cls-32" width="1366" height="768"/>
<rect class="cls-33" x="0.5" y="0.5" width="1365" height="767"/>
</g>
<!--PROBLEM PART HERE (HOUSE IN SVG) -->
<!--PROBLEM PART HERE (HOUSE IN SVG) -->
<!--PROBLEM PART HERE (HOUSE IN SVG) -->
<!--PROBLEM PART HERE (HOUSE IN SVG) -->
<!--PROBLEM PART HERE (HOUSE IN SVG) -->
<!--PROBLEM PART HERE (HOUSE IN SVG) -->
<!--PROBLEM PART HERE (HOUSE IN SVG) -->
<g id="House" class="slide-in-bottom" transform="translate(-15 382.031)">
<rect id="Rectangle_90" data-name="Rectangle 90" class="cls-15" width="16.152" height="55.91" transform="translate(590.714 197.305)"/>
<path id="Path_906" data-name="Path 906" class="cls-20" d="M780.5,342.294l-40.205-48.333H662.021l-47.834,46.591.967.621h-.345v96.91H780.053v-96.91Z" transform="translate(-162.627 -97.277)"/>
<path id="Path_907" data-name="Path 907" class="cls-21" d="M956.606,462.961c0,.07-.005.14-.005.211a46.994,46.994,0,0,0,3.424,7.857,19.58,19.58,0,0,0-1,6.283c0,7.363,3.8,13.331,8.484,13.331s8.484-5.969,8.484-13.331a20.178,20.178,0,0,0-.553-4.736,9.688,9.688,0,0,0,1.043-11.8,9.694,9.694,0,1,0,12.564-14.766,9.7,9.7,0,1,0-13.054-9.1c0,.142,0,.283.011.423a9.7,9.7,0,0,0-12.424,7.808,9.7,9.7,0,1,0-6.973,17.817Z" transform="translate(-369.01 -283.968)"/>
<path id="Path_908" data-name="Path 908" class="cls-22" d="M767.751,293.125l-49.077,57.537v87.207h88.213V339.716Z" transform="translate(-189.461 -97.063)"/>
<rect id="Rectangle_91" data-name="Rectangle 91" class="cls-15" width="18.015" height="15.924" transform="translate(564.622 292.58)"/>
<rect id="Rectangle_92" data-name="Rectangle 92" class="cls-15" width="18.015" height="15.671" transform="translate(564.622 265.017)"/>
<rect id="Rectangle_93" data-name="Rectangle 93" class="cls-23" width="18.015" height="15.924" transform="translate(564.622 292.58)"/>
<rect id="Rectangle_94" data-name="Rectangle 94" class="cls-23" width="18.015" height="15.671" transform="translate(564.622 265.017)"/>
<path id="Path_909" data-name="Path 909" class="cls-15" d="M385.357,225.672,314.1,140.816H174.018L88.41,224.2l1.729,1.112h-.618v173.44H385.26V225.313Z" transform="translate(-27.597 -57.947)"/>
<path id="Path_910" data-name="Path 910" class="cls-15" d="M528.416,212.954l9.616-7.691c-7.47-.824-10.539,3.25-11.8,6.474-5.836-2.423-12.189.753-12.189.753l19.239,6.984A14.559,14.559,0,0,0,528.416,212.954Z" transform="translate(-257.325 -226.938)"/>
<path id="Path_911" data-name="Path 911" class="cls-15" d="M760.573,240.5l9.616-7.691c-7.47-.824-10.539,3.25-11.8,6.474-5.836-2.423-12.189.753-12.189.753l19.239,6.984a14.558,14.558,0,0,0-4.87-6.521Z" transform="translate(-316.947 -234.013)"/>
<path id="Path_912" data-name="Path 912" class="cls-15" d="M705.086,319.327l9.615-7.69c-7.47-.824-10.539,3.25-11.8,6.474-5.836-2.423-12.189.753-12.189.753l19.239,6.984a14.557,14.557,0,0,0-4.87-6.521Z" transform="translate(-302.697 -254.257)"/>
<rect id="Rectangle_95" data-name="Rectangle 95" class="cls-15" width="16.152" height="55.91" transform="translate(298.74 74.924)"/>
<rect id="Rectangle_96" data-name="Rectangle 96" class="cls-15" width="16.152" height="55.91" transform="translate(462.121 141.395)"/>
<rect id="Rectangle_97" data-name="Rectangle 97" class="cls-15" width="16.152" height="55.91" transform="translate(462.121 135.804)"/>
<path id="Path_913" data-name="Path 913" class="cls-24" d="M603.7,285.367l-55.133-65.482H440.391l-66.105,64.388,1.335.858h-.476V419.059H603.508V285.132Z" transform="translate(-101.016 -78.253)"/>
<path id="Path_914" data-name="Path 914" class="cls-25" d="M586.506,218.73l-67.822,79.514V418.763H640.592V283.118Z" transform="translate(-138.1 -77.957)"/>
<path id="Path_915" data-name="Path 915" class="cls-26" d="M363.242,139.32,275.41,242.293V398.369H433.285V222.7Z" transform="translate(-75.622 -57.562)"/>
<path id="Path_916" data-name="Path 916" class="cls-27" d="M341.806,686.723s.386-8.093,8.3-7.152" transform="translate(-213.09 -348.758)"/>
<circle id="Ellipse_326" data-name="Ellipse 326" class="cls-18" cx="3.963" cy="3.963" r="3.963" transform="translate(122.516 322.339)"/>
<rect id="Rectangle_98" data-name="Rectangle 98" class="cls-27" width="1.119" height="7.83" transform="translate(125.835 332.974)"/>
<path id="Path_917" data-name="Path 917" class="cls-27" d="M389.452,686.723s.386-8.093,8.3-7.152" transform="translate(-225.326 -348.758)"/>
<circle id="Ellipse_327" data-name="Ellipse 327" class="cls-18" cx="3.963" cy="3.963" r="3.963" transform="translate(157.926 322.339)"/>
<rect id="Rectangle_99" data-name="Rectangle 99" class="cls-27" width="1.119" height="7.83" transform="translate(161.244 332.974)"/>
<path id="Path_918" data-name="Path 918" class="cls-27" d="M662.789,686.723s.386-8.093,8.3-7.152" transform="translate(-295.525 -348.758)"/>
<circle id="Ellipse_328" data-name="Ellipse 328" class="cls-18" cx="3.963" cy="3.963" r="3.963" transform="translate(361.065 322.339)"/>
<rect id="Rectangle_100" data-name="Rectangle 100" class="cls-27" width="1.119" height="7.83" transform="translate(364.383 332.974)"/>
<path id="Path_919" data-name="Path 919" class="cls-27" d="M864.24,686.723s.386-8.093,8.3-7.152" transform="translate(-347.261 -348.758)"/>
<circle id="Ellipse_329" data-name="Ellipse 329" class="cls-18" cx="3.963" cy="3.963" r="3.963" transform="translate(510.78 322.339)"/>
<rect id="Rectangle_101" data-name="Rectangle 101" class="cls-27" width="1.119" height="7.83" transform="translate(514.097 332.974)"/>
<path id="Path_920" data-name="Path 920" class="cls-27" d="M276.606,686.723s.386-8.093,8.3-7.152" transform="translate(-196.345 -348.758)"/>
<circle id="Ellipse_330" data-name="Ellipse 330" class="cls-18" cx="3.963" cy="3.963" r="3.963" transform="translate(74.061 322.339)"/>
<rect id="Rectangle_102" data-name="Rectangle 102" class="cls-27" width="1.119" height="7.83" transform="translate(77.379 332.974)"/>
<path id="Path_921" data-name="Path 921" class="cls-21" d="M782.806,371.854c0,.081-.006.161-.006.242a53.834,53.834,0,0,0,3.923,9,22.425,22.425,0,0,0-1.146,7.2c0,8.435,4.351,15.272,9.719,15.272s9.719-6.838,9.719-15.272a23.111,23.111,0,0,0-.633-5.425,11.1,11.1,0,0,0,1.2-13.517,11.105,11.105,0,1,0,14.393-16.916,11.108,11.108,0,1,0-14.955-10.422c0,.163.005.324.012.485a11.114,11.114,0,0,0-14.233,8.945,11.107,11.107,0,1,0-7.988,20.41Z" transform="translate(-324.087 -259.233)"/>
<path id="Path_922" data-name="Path 922" class="cls-21" d="M158.8,234.316l-13.907,19.242L143.546,215.4l-1.663,56.344-12.816-17.732,12.7,21.626-4.206,142.475H150.69l-5.651-160.365Z" transform="translate(-38.038 -77.1)"/>
<path id="Path_923" data-name="Path 923" class="cls-15" d="M71.612,155.57,53.39,180.781l-1.762-50L49.448,204.6,32.657,181.371,49.3,209.706,43.787,396.379h17.2l-7.4-210.112Z" transform="translate(-13.278 -55.369)"/>
<path id="Path_926" data-name="Path 926" class="cls-21" d="M558.681,277.421c0,.095-.007.189-.007.284a13,13,0,0,0,3.953,9.347,13.01,13.01,0,0,0,.652,1.218,26.325,26.325,0,0,0-1.345,8.448c0,9.9,5.107,17.926,11.408,17.926s11.408-8.026,11.408-17.926A27.141,27.141,0,0,0,584,290.35a13.027,13.027,0,0,0,1.4-15.866A13.035,13.035,0,1,0,602.3,254.628,13.038,13.038,0,1,0,584.748,242.4c0,.191.006.38.014.569a13.046,13.046,0,0,0-16.706,10.5,13.037,13.037,0,1,0-9.376,23.957Z" transform="translate(-266.135 -233.154)"/>
<rect id="Rectangle_103" data-name="Rectangle 103" class="cls-15" width="32.242" height="32.967" transform="translate(220.085 205.167)"/>
<rect id="Rectangle_104" data-name="Rectangle 104" class="cls-15" width="32.242" height="32.968" transform="translate(220.085 250.025)"/>
<rect id="Rectangle_105" data-name="Rectangle 105" class="cls-23" width="32.242" height="32.967" transform="translate(220.085 205.167)"/>
<rect id="Rectangle_106" data-name="Rectangle 106" class="cls-23" width="32.242" height="32.968" transform="translate(220.085 250.025)"/>
<rect id="Rectangle_107" data-name="Rectangle 107" class="cls-15" width="32.242" height="32.967" transform="translate(264.676 205.167)"/>
<rect id="Rectangle_108" data-name="Rectangle 108" class="cls-15" width="32.242" height="32.968" transform="translate(264.676 250.025)"/>
<rect id="Rectangle_109" data-name="Rectangle 109" class="cls-23" width="32.242" height="32.967" transform="translate(264.676 205.167)"/>
<rect id="Rectangle_110" data-name="Rectangle 110" class="cls-23" width="32.242" height="32.968" transform="translate(264.676 250.025)"/>
<rect id="Rectangle_111" data-name="Rectangle 111" class="cls-15" width="32.242" height="32.967" transform="translate(309.266 205.167)"/>
<rect id="Rectangle_112" data-name="Rectangle 112" class="cls-15" width="32.242" height="32.968" transform="translate(309.266 250.025)"/>
<rect id="Rectangle_113" data-name="Rectangle 113" class="cls-23" width="32.242" height="32.967" transform="translate(309.266 205.167)"/>
<rect id="Rectangle_114" data-name="Rectangle 114" class="cls-23" width="32.242" height="32.968" transform="translate(309.266 250.025)"/>
<rect id="Rectangle_115" data-name="Rectangle 115" class="cls-15" width="24.897" height="24.102" transform="translate(412.334 272.061)"/>
<rect id="Rectangle_116" data-name="Rectangle 116" class="cls-15" width="24.897" height="24.102" transform="translate(412.334 236.068)"/>
<rect id="Rectangle_117" data-name="Rectangle 117" class="cls-23" width="24.897" height="24.102" transform="translate(412.334 272.061)"/>
<rect id="Rectangle_118" data-name="Rectangle 118" class="cls-23" width="24.897" height="24.102" transform="translate(412.334 236.068)"/>
<rect id="Rectangle_119" data-name="Rectangle 119" class="cls-15" width="24.897" height="24.102" transform="translate(448.75 272.061)"/>
<rect id="Rectangle_120" data-name="Rectangle 120" class="cls-15" width="24.897" height="24.102" transform="translate(448.75 236.068)"/>
<rect id="Rectangle_121" data-name="Rectangle 121" class="cls-23" width="24.897" height="24.102" transform="translate(448.75 272.061)"/>
<rect id="Rectangle_122" data-name="Rectangle 122" class="cls-23" width="24.897" height="24.102" transform="translate(448.75 236.068)"/>
</g>
</g>
</svg>
</section>
</body>
</html>The problem causing item in SVG has an id="House" and the animation class is in CSS file at line 179 in style.css with class name **.slide-in-bottom**
Solution
After spending a lot of time I have finally found a decent solution to the problem. The problem is with apps of Adobe and other placed where you download the SVG from like UNDRAW - free open source svg.
They don't take into account that web designers would want to use animation with transform: translate() property and put this property within the SVG files you download to save on time and calculating new paths after you group items in SVG ( for example in Adobe XD and Adobe Illustrator). It becomes a nightmare to animate SVG this way.
There are two ways to correct it that I found the easiest and don't require you to use a JS library like SVGO to do this job.
1. Use Figma
Figma is free to use if you use starter plan which includes 2 editors, cloud storage, good interface better than adobe XD, and several other perks. you can check free plan here
THE FIX
All you need to do is open your SVG in Figma and select Art-board and then find export BUTTON on the bottom right
Select SVG as the export type
Then click three dots and check option Inclide "id" attribute (adds the name of the layer/ group as an ID in SVG elements recommended)
Click on export
Voila you're done Why Figma is far better than adobe Xd
2. Use Affinity designer
This requires you to pay about 40$ but it's similar to Adobe Illustrator and has more features as it is not made solely for web UI?UX design.
THE FIX
Just open your SVG -> Export -> SVG -> More -> check Flatten transforms .
- PDF file creation using html-pdf is not working in my deployment server?
- Not iterating over map in node js
- Select text in textarea, delete it by backspace/delete to add CSS for another element
- Jquery : Uncaught SyntaxError: Failed to execute 'appendChild' on 'Node': missing ) after argument list
- center megamenu div under nav button
- Firebase Authentication: Where is the token stored in web?
- plugin:vite:import-analysis - Failed to parse source for import analysis because the content contains invalid JS syntax. - Vue 3
- SCRAM-SERVER-FIRST-MESSAGE: client password must be a string
- Where Am I Going Wrong Here - JAVASCRIPT
- Why does the function expression in an IIFE have to be wrapped in parentheses?
- In an object-destructuring declaration, what do the identifiers on the target side refer to?
- Can I destructure an object property into a property of another object?
- How does the object destructuring syntax work in ES6?
- How does nested destructuring work in ES6?
- Why does choosing module imports not work like destructuring?
- What is “fail-soft destructuring”?
- navigator.clipboard.readText() is not working in Firefox
- Why does console.log on a WeakSet give <items unknown> in node.js?
- Why do I need a WeakMap to store private data, as opposed to just closing over a variable with limited scope?
- Get url params in API route handler in Next.js
- How to move all Custom Element related into separate file to be imported & reused
- How to fetch data server-side in the latest Next.js? Tried getStaticProps but it's not running and getting undefined
- How to render my components in a tree structure, like default file structure in IDE using React
- Contentful API returning 'version mismatch' on entry update
- jqGrid dynamically change search operator type on button click
- JS making loop animation for a progress-bar
- Given an array of numbers(arr) and the length of the array(n) as arguments, how do you create a tribonacci sequence?
- "Could not read source map for chrome-error..." when using Visual Studio Code to debug JavaScript in Edge
- LeetCode Question - 2634. Filter Elements from Array
- How to get {[space][caret][space]} and {{[space][caret][space]}}