I'am tryng to rotate Wind turbine I get this component on symbol Factory but the rotation is out of axis
this what I using on stylesheet
@keyframes rotateTurbineWind {
0%{
}
100%{
transform: rotate(360deg);
transform-origin: 50% 50%
}
} transform: rotate(0deg);
transform-origin: 50% 50%
I try set origin to 0degr, but it isn't work.
I would recommend, just creating your own SVG, so then you know exactly where the center point is.
Likely what is happening here, is float rounding error, which is common in my experience among the Symbol factory.
If you need assistance with that, I can likely whip something up.
This looks centered, but it still looks wonky due to the angle it's drawn in.
View pasted as JSON.
{
"custom": {},
"params": {},
"props": {},
"root": {
"children": [
{
"meta": {
"name": "Wind turbine - offshore - perspective view 2"
},
"position": {
"height": 615,
"width": 561,
"x": 110,
"y": 123
},
"props": {
"elements": [
{
"name": "symbol",
"type": "symbol"
},
{
"elements": [
{
"elements": [
{
"name": "stop",
"offset": "0",
"stopColor": "#999999",
"style": {
"stopColor": "#999999"
},
"type": "stop"
},
{
"name": "stop",
"offset": "0.5",
"stopColor": "#E5E5E5",
"style": {
"stopColor": "#E5E5E5"
},
"type": "stop"
},
{
"name": "stop",
"offset": "1",
"stopColor": "#999999",
"style": {
"stopColor": "#999999"
},
"type": "stop"
}
],
"gradientUnits": "userSpaceOnUse",
"id": "SVGID_1_",
"name": "SVGID_1_",
"type": "linearGradient",
"x1": "23.5085",
"x2": "27.6169",
"y1": "72.6316",
"y2": "72.6316"
},
{
"d": "M27.617,99.506l-0.913-53.747h-2.282l-0.913,53.747H27.617z",
"fill": {
"url": "url(#SVGID_1_)"
},
"name": "path",
"type": "path"
}
],
"id": "Group_Pole",
"name": "Group_Pole",
"type": "group"
},
{
"elements": [
{
"d": "M28.358,99.583v14.492",
"fill": {
"paint": "transparent"
},
"name": "path",
"stroke": {
"paint": "#B00C0A",
"width": "0.25"
},
"type": "path"
},
{
"d": "M27.788,100.495h0.57",
"fill": {
"paint": "transparent"
},
"name": "path",
"stroke": {
"paint": "#B00C0A",
"width": "0.25"
},
"type": "path"
},
{
"d": "M27.788,101.978h0.57",
"fill": {
"paint": "transparent"
},
"name": "path",
"stroke": {
"paint": "#B00C0A",
"width": "0.25"
},
"type": "path"
},
{
"d": "M27.788,103.348h0.57",
"fill": {
"paint": "transparent"
},
"name": "path",
"stroke": {
"paint": "#B00C0A",
"width": "0.25"
},
"type": "path"
},
{
"d": "M27.788,104.832h0.57",
"fill": {
"paint": "transparent"
},
"name": "path",
"stroke": {
"paint": "#B00C0A",
"width": "0.25"
},
"type": "path"
},
{
"d": "M27.788,106.315h0.57",
"fill": {
"paint": "transparent"
},
"name": "path",
"stroke": {
"paint": "#B00C0A",
"width": "0.25"
},
"type": "path"
},
{
"d": "M27.788,107.684h0.57",
"fill": {
"paint": "transparent"
},
"name": "path",
"stroke": {
"paint": "#B00C0A",
"width": "0.25"
},
"type": "path"
},
{
"d": "M27.788,109.053h0.57",
"fill": {
"paint": "transparent"
},
"name": "path",
"stroke": {
"paint": "#B00C0A",
"width": "0.25"
},
"type": "path"
},
{
"d": "M27.788,110.651h0.57",
"fill": {
"paint": "transparent"
},
"name": "path",
"stroke": {
"paint": "#B00C0A",
"width": "0.25"
},
"type": "path"
},
{
"d": "M27.788,112.02h0.57",
"fill": {
"paint": "transparent"
},
"name": "path",
"stroke": {
"paint": "#B00C0A",
"width": "0.25"
},
"type": "path"
},
{
"d": "M27.788,113.389h0.57",
"fill": {
"paint": "transparent"
},
"name": "path",
"stroke": {
"paint": "#B00C0A",
"width": "0.25"
},
"type": "path"
},
{
"d": "M22.311,99.126v-1.141",
"fill": {
"paint": "transparent"
},
"name": "path",
"stroke": {
"paint": "#666666",
"width": "0.25"
},
"type": "path"
},
{
"d": "M28.245,99.126v-1.141",
"fill": {
"paint": "transparent"
},
"name": "path",
"stroke": {
"paint": "#666666",
"width": "0.25"
},
"type": "path"
},
{
"d": "M22.882,99.126v-1.141",
"fill": {
"paint": "transparent"
},
"name": "path",
"stroke": {
"paint": "#666666",
"width": "0.25"
},
"type": "path"
},
{
"d": "M24.137,99.126v-1.141",
"fill": {
"paint": "transparent"
},
"name": "path",
"stroke": {
"paint": "#666666",
"width": "0.25"
},
"type": "path"
},
{
"d": "M25.62,99.126v-1.141",
"fill": {
"paint": "transparent"
},
"name": "path",
"stroke": {
"paint": "#666666",
"width": "0.25"
},
"type": "path"
},
{
"d": "M27.104,99.126v-1.141",
"fill": {
"paint": "transparent"
},
"name": "path",
"stroke": {
"paint": "#666666",
"width": "0.25"
},
"type": "path"
},
{
"d": "M28.815,99.126v-1.141",
"fill": {
"paint": "transparent"
},
"name": "path",
"stroke": {
"paint": "#666666",
"width": "0.25"
},
"type": "path"
},
{
"d": "M22.161,97.985h6.796",
"fill": {
"paint": "transparent"
},
"name": "path",
"stroke": {
"paint": "#B2B2B2",
"width": "0.25"
},
"type": "path"
}
],
"id": "Group_Steps",
"name": "Group_Steps",
"type": "group"
},
{
"elements": [
{
"elements": [
{
"name": "stop",
"offset": "0",
"stopColor": "#D11101",
"style": {
"stopColor": "#D11101"
},
"type": "stop"
},
{
"name": "stop",
"offset": "0.52",
"stopColor": "#FF3927",
"style": {
"stopColor": "#FF3927"
},
"type": "stop"
},
{
"name": "stop",
"offset": "1",
"stopColor": "#D11101",
"style": {
"stopColor": "#D11101"
},
"type": "stop"
}
],
"gradientUnits": "userSpaceOnUse",
"id": "SVGID_2_",
"name": "SVGID_2_",
"type": "linearGradient",
"x1": "23.2239",
"x2": "28.0164",
"y1": "106.5437",
"y2": "106.5437"
},
{
"d": "M23.224,99.24h4.792v14.606h-4.792V99.24z",
"fill": {
"url": "url(#SVGID_2_)"
},
"name": "path",
"type": "path"
},
{
"d": "M22.311,99.126h6.504v0.457h-6.504V99.126z",
"fill": {
"paint": "#E62E1D"
},
"name": "path",
"stroke": {
"paint": "#E62E1D",
"width": "0.25"
},
"type": "path"
},
{
"d": "M23.224,113.846h4.792v0.228h-4.792V113.846z",
"fill": {
"paint": "#E62E1D"
},
"name": "path",
"stroke": {
"paint": "#E62E1D",
"width": "0.25"
},
"type": "path"
},
{
"d": "M28.014,99.583h-4.793h-0.914l0.914,0.228v0.685c0,0,0.859-0.56,2.282-0.575 c1.594-0.018,2.512,0.575,2.512,0.575V99.81l0.799-0.228H28.014z",
"fill": {
"paint": "#75150C"
},
"name": "path",
"type": "path"
}
],
"id": "Group_Base",
"name": "Group_Base",
"type": "group"
},
{
"elements": [
{
"elements": [
{
"name": "stop",
"offset": "0",
"stopColor": "#666666",
"style": {
"stopColor": "#666666"
},
"type": "stop"
},
{
"name": "stop",
"offset": "0.5",
"stopColor": "#E5E5E5",
"style": {
"stopColor": "#E5E5E5"
},
"type": "stop"
},
{
"name": "stop",
"offset": "1",
"stopColor": "#666666",
"style": {
"stopColor": "#666666"
},
"type": "stop"
}
],
"gradientUnits": "userSpaceOnUse",
"id": "SVGID_3_",
"name": "SVGID_3_",
"type": "linearGradient",
"x1": "26.9749",
"x2": "26.8575",
"y1": "42.3079",
"y2": "46.1086"
},
{
"d": "M21.911,45.759c0,0,1.255-0.292,1.255-1.558c0-1.109-0.805-1.751-0.805-1.751h8.901 c0,0,0.859,1.408,0.531,2.408c-0.333,1.015-1.209,1.471-1.209,1.471L21.911,45.759z",
"fill": {
"url": "url(#SVGID_3_)"
},
"name": "path",
"type": "path"
}
],
"id": "Group_Motor",
"name": "Group_Motor",
"type": "group"
},
{
"elements": [
{
"elements": [
{
"name": "stop",
"offset": "0",
"stopColor": "#8C8C8C",
"style": {
"stopColor": "#8C8C8C"
},
"type": "stop"
},
{
"name": "stop",
"offset": "0.5",
"stopColor": "#F2F2F2",
"style": {
"stopColor": "#F2F2F2"
},
"type": "stop"
},
{
"name": "stop",
"offset": "1",
"stopColor": "#8C8C8C",
"style": {
"stopColor": "#8C8C8C"
},
"type": "stop"
}
],
"gradientUnits": "userSpaceOnUse",
"id": "SVGID_4_",
"name": "SVGID_4_",
"type": "linearGradient",
"x1": "38.6375",
"x2": "37.6864",
"y1": "48.2336",
"y2": "50.8647"
},
{
"d": "M22.735,45.336l30.214,10.236l0.229-0.228v-0.571L30.127,44.618l-1.825-0.913l-1.142-0.343 l-2.396,0.229l-1.598,0.114c0,0-0.01,0.724-0.078,0.934C22.963,45.022,22.735,45.336,22.735,45.336z",
"fill": {
"url": "url(#SVGID_4_)"
},
"name": "path",
"type": "path"
},
{
"elements": [
{
"name": "stop",
"offset": "0",
"stopColor": "#8C8C8C",
"style": {
"stopColor": "#8C8C8C"
},
"type": "stop"
},
{
"name": "stop",
"offset": "0.5",
"stopColor": "#F2F2F2",
"style": {
"stopColor": "#F2F2F2"
},
"type": "stop"
},
{
"name": "stop",
"offset": "1",
"stopColor": "#8C8C8C",
"style": {
"stopColor": "#8C8C8C"
},
"type": "stop"
}
],
"gradientUnits": "userSpaceOnUse",
"id": "SVGID_5_",
"name": "SVGID_5_",
"type": "linearGradient",
"x1": "16.3127",
"x2": "18.3404",
"y1": "21.6287",
"y2": "21.2349"
},
{
"d": "M22.595,42.614l-9.015-42.5L13.352,0l-0.228,0.343l5.363,33.549l0.342,2.738l0.343,1.369 l1.369,3.081l0.635,1.451c0,0,0.54-0.207,0.734-0.195C22.102,42.348,22.595,42.614,22.595,42.614z",
"fill": {
"url": "url(#SVGID_5_)"
},
"name": "path",
"type": "path"
},
{
"elements": [
{
"name": "stop",
"offset": "0",
"stopColor": "#8C8C8C",
"style": {
"stopColor": "#8C8C8C"
},
"type": "stop"
},
{
"name": "stop",
"offset": "0.5",
"stopColor": "#F2F2F2",
"style": {
"stopColor": "#F2F2F2"
},
"type": "stop"
},
{
"name": "stop",
"offset": "1",
"stopColor": "#8C8C8C",
"style": {
"stopColor": "#8C8C8C"
},
"type": "stop"
}
],
"gradientUnits": "userSpaceOnUse",
"id": "SVGID_6_",
"name": "SVGID_6_",
"type": "linearGradient",
"x1": "10.0554",
"x2": "11.7257",
"y1": "60.7947",
"y2": "61.9599"
},
{
"d": "M20.486,44.962L0.002,76.569v0.57h0.342l17.573-23.393l1.483-1.712l0.686-1.255l1.255-3.195 l0.641-1.829c0,0-0.483-0.027-0.79-0.235C20.803,45.257,20.486,44.962,20.486,44.962z",
"fill": {
"url": "url(#SVGID_6_)"
},
"name": "path",
"type": "path"
}
],
"id": "Group_Blades",
"name": "Group_Blades",
"style": {
"animation": "ia_symbolComponent__animate--rotate linear infinite",
"animation-duration": "1000ms",
"classes": "",
"transform-origin": "22px 44px"
},
"type": "group"
},
{
"elements": [
{
"cx": 19.9055,
"cy": 43.8752,
"elements": [
{
"name": "stop",
"offset": "0",
"stopColor": "#E5E5E5",
"style": {
"stopColor": "#E5E5E5"
},
"type": "stop"
},
{
"name": "stop",
"offset": "0.5",
"stopColor": "#B2B2B2",
"style": {
"stopColor": "#B2B2B2"
},
"type": "stop"
},
{
"name": "stop",
"offset": "1",
"stopColor": "#7F7F7F",
"style": {
"stopColor": "#7F7F7F"
},
"type": "stop"
}
],
"gradientUnits": "userSpaceOnUse",
"id": "SVGID_7_",
"name": "SVGID_7_",
"r": "3.0742",
"type": "radialGradient"
},
{
"d": "M21.911,42.336c-0.82,0-2.014,0.963-2.024,1.585c-0.011,0.622,1.234,1.838,2.024,1.838 c0.693,0,1.255-0.767,1.255-1.712S22.604,42.336,21.911,42.336z",
"fill": {
"url": "url(#SVGID_7_)"
},
"name": "path",
"type": "path"
}
],
"id": "Group_Center",
"name": "Group_Center",
"type": "group"
}
],
"viewBox": "0 0 53.18 113.998"
},
"type": "ia.shapes.svg"
}
],
"meta": {
"name": "root"
},
"type": "ia.container.coord"
}
}