css - 转换复杂 SVG 组中嵌套元素的原点

Question

我很难在嵌套的 SVG 元素上正确地转换原点，想知道我是否可以借用别人的眼睛来发现我的愚蠢行为？

我已经尝试了多种不同的组合，到目前为止，当我倾向于在一个浏览器中接近我想要的东西时，它在另一个浏览器上就完全不一样了。

对于 PoC 示例，我们正在查看我的小家伙的螺旋桨。为了简单起见，我将此示例的变换原点设置在中心(就像我说的，我尝试了多种变体，但还没有成功)。谁能告诉我是什么导致了浏览器之间的差异(是的，我尝试在各种浏览器限定符中指定转换，如 -webkit-* 以及以各种方式点击 X/Y)但你会注意到在 Chrome 中它更接近到元素的中心，而在 Firefox 中，原点显示为绝对父 SVG 本身的中心...

所以，有人想教我一些关于 SVG 动画中嵌套元素变换起源的新知识，并帮助我的小家伙用他的螺旋桨飞到需要的地方吗？ :)

CODEPEN to tinker with

PS - 垂直的绿色中心线只是一个视觉尺寸引用占位符，我的小家伙飞它是在真实代码中，因为我只能向 SO 片段添加这么多字符...

body {text-align:center}


@keyframes adventure {
  
  10% {
    transform: translateX(5%) rotate(2deg);
  } 25% {
    transform: translateX(13%) rotate(15deg);
  } 50% {
    transform: translateX(-13%) rotate(-5deg);
  } 75% {
    transform: translateX(13%) rotate(15deg);
  } 90% {
    transform: translateX(-5%) rotate(-2deg);
  }
  
}

@keyframes navigate {
  10% {
    transform: rotate(2deg);
  } 25% {
    transform: rotate(10deg);
  } 50% {
    transform: rotate(-5deg);
  } 75% {
    transform: rotate(10deg);
  } 90% {
    transform: rotate(-2deg);
  }
}

@keyframes propel { 
  100% {transform: rotate(360deg)}
}

#fullcharacter {
  transform-origin: 50%;
  animation: adventure 5s infinite;
  -webkit-transition-timing-function: step-start;
  transition-timing-function: step-start;
}


#steering {
  transform-origin: center;
  animation: navigate 5s infinite;
}

#propeller {
  transform-origin: center;
  animation: propel 4s infinite linear;
}

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="525px" height="250px" viewBox="0 0 525 250" enable-background="new 0 0 525 250" xml:space="preserve">
<rect fill="#81BFE9" width="525" height="250"/>
<g id="fullcharacter">
	<g id="steering">
		<path fill="#BE1E2D" d="M242.271,125.417c0,0.552-0.479,1-1.069,1h-3.03c-0.589,0-1.068-0.448-1.068-1l0,0
			c0-0.552,0.479-1,1.068-1h3.03C241.792,124.417,242.271,124.865,242.271,125.417L242.271,125.417z"/>
		<path fill="#BE1E2D" d="M286.358,125.417c0,0.551-0.479,1-1.068,1h-3.029c-0.59,0-1.068-0.449-1.068-1l0,0
			c0-0.552,0.479-0.999,1.068-0.999h3.029C285.88,124.417,286.358,124.865,286.358,125.417L286.358,125.417z"/>
		<g>
			<path fill="#DDAC85" stroke="#BA9168" stroke-width="0.5" stroke-miterlimit="10" d="M239.87,127.589c0,0,3.407-2.738,4.75-2.583
				c1.664,0.192,5.234,2.8,5,4.458c-0.225,1.591-5.795,2.781-5.795,2.781L239.87,127.589z"/>
			<path fill="#DDAC85" stroke="#BA9168" stroke-width="0.5" stroke-miterlimit="10" d="M284.354,127.589
				c0,0-3.407-2.738-4.75-2.583c-1.664,0.192-5.234,2.8-5,4.458c0.225,1.591,5.795,2.781,5.795,2.781L284.354,127.589z"/>
		</g>
		<path fill="#D6A685" stroke="#BA9168" stroke-width="0.25" stroke-miterlimit="10" d="M290.434,134.938
			c0,0,4.426,6.422,4.673,9.203c0.171,1.925-0.751,6.394-2.025,7.245c-1.815,1.214-7.728-3.23-7.728-3.23L290.434,134.938z"/>
		<path fill="#424142" stroke="#000000" stroke-width="0.25" stroke-miterlimit="10" d="M287.158,126.417h-0.908v-0.833h-5v0.833
			h-0.993c0.003,0.117,0.015,0.229,0.015,0.348v15.422c0,4.61-2.687,8.349-6,8.349h-25c-3.313,0-6-3.738-6-8.349v-15.422
			c0-0.118,0.011-0.23,0.015-0.348h-1.119v-0.833h-5v0.833h-1.199c-0.124,0.669-0.197,1.365-0.197,2.087v22.147
			c0,4.61,2.687,8.349,6,8.349h39.583c3.313,0,6-3.738,6-8.349v-22.147C287.354,127.782,287.281,127.086,287.158,126.417z"/>
		<path fill="#D6A685" stroke="#BA9168" stroke-width="0.25" stroke-miterlimit="10" d="M232.42,134.938
			c0,0-4.425,6.422-4.673,9.203c-0.171,1.925,0.751,6.394,2.025,7.245c1.815,1.214,7.727-3.23,7.727-3.23L232.42,134.938z"/>
		<g>
			<path fill="#EBB789" stroke="#C3996B" stroke-width="0.25" stroke-miterlimit="10" d="M232.876,145.963
				c0,0,0.137,0.129-0.119,0.128c-0.902-0.003,0.79,2.842,1.599,3.242c2.943,1.456,11.196,0.29,12.908-2.524
				c0.376-0.617,0.248-3.348-0.285-2.873c-1.528,1.364-4.473,0.662-4.473,0.662s2.94,0.374,4.415-0.846
				c0.787-0.65,1.082-4.528,0.128-4.141c-2.34,0.95-5.744,0.766-5.744,0.766s3.64-0.21,5.679-0.978
				c1.147-0.433,1.245-5.443,0.125-4.928c-2.998,1.379-6.156,1.212-6.156,1.212s3.492,0.042,6.086-1.379
				c1.555-0.851,0.382-7.08-1.396-6.944c-7.403,0.563-11.077,0.177-12.742,1.556c-0.732,0.605-2.092,4.076-1.278,4.599
				c0.773,0.496,1.112,0.793,1.112,0.793s-0.139,0.041-1.157-0.6c-1.301-0.816-1.986,5.729-0.506,6.143
				c0.524,0.146,0.222,0.063,0.222,0.063s0.467,0.146-0.268,0.129c-1.533-0.036,0.135,5.875,1.669,5.911
				C232.958,145.96,232.876,145.963,232.876,145.963z"/>
			<path fill="#DDA885" d="M234.458,148.958c0,0,3.333,1.917,10.792-0.958c2.289-0.882,2.256-3.986,1.541-3.312
				c-0.75,0.708-2.539,0.791-3.416,0.479c-1.875-0.667,2.438,2.127,1.75,2.416C239.068,150.126,234.458,148.958,234.458,148.958z"/>
			<path fill="#DDA885" d="M241.688,140.75c0,0,2.303,0.095,3.063,0c0.632-0.079,2.472-0.625,2.472-0.625s-0.08,1.388-0.159,1.844
				c-0.063,0.358-0.375,1.406-0.375,1.406s-0.953-1.477-1.438-1.781C244.476,141.105,241.688,140.75,241.688,140.75z"/>
			<path fill="#DDA885" d="M241.094,136.094c0,0,2.758-0.124,3.656-0.313c0.639-0.134,2.472-0.844,2.472-0.844
				s0.249,1.736,0.185,2.313c-0.049,0.447-0.531,1.719-0.531,1.719s-0.391-1.796-0.844-2.156
				C245.054,136.037,241.094,136.094,241.094,136.094z"/>
			<path fill="#DDA885" d="M239.068,128.156c0,0,2.998-0.086,3.995-0.156c0.697-0.049,2.781-0.281,2.781-0.281
				s0.877,1.128,1.063,1.563c0.238,0.559,0.5,2.375,0.5,2.375s-1.416-2.35-2.188-2.781
				C243.868,128.119,239.068,128.156,239.068,128.156z"/>
			<path fill="#EBB789" stroke="#C3996B" stroke-width="0.25" stroke-miterlimit="10" d="M291.052,145.963
				c0,0-0.138,0.129,0.119,0.128c0.901-0.003-0.79,2.842-1.599,3.242c-2.943,1.456-11.196,0.29-12.908-2.524
				c-0.376-0.617-0.248-3.348,0.285-2.873c1.527,1.364,4.473,0.662,4.473,0.662s-2.94,0.374-4.415-0.846
				c-0.786-0.65-1.082-4.528-0.128-4.141c2.34,0.95,5.743,0.766,5.743,0.766s-3.64-0.21-5.679-0.978
				c-1.148-0.433-1.246-5.443-0.126-4.928c2.997,1.379,6.155,1.212,6.155,1.212s-3.492,0.042-6.086-1.379
				c-1.555-0.851-0.381-7.08,1.396-6.944c7.403,0.563,11.077,0.177,12.742,1.556c0.732,0.605,2.092,4.076,1.279,4.599
				c-0.773,0.496-1.112,0.793-1.112,0.793s0.14,0.041,1.157-0.6c1.301-0.816,1.986,5.729,0.506,6.143
				c-0.523,0.146-0.222,0.063-0.222,0.063s-0.468,0.146,0.269,0.129c1.532-0.036-0.136,5.875-1.67,5.911
				C290.971,145.96,291.052,145.963,291.052,145.963z"/>
			<path fill="#DDA885" d="M289.469,148.958c0,0-3.332,1.917-10.791-0.958c-2.289-0.882-2.256-3.986-1.541-3.312
				c0.75,0.708,2.539,0.791,3.416,0.479c1.875-0.667-2.438,2.127-1.75,2.416C284.859,150.126,289.469,148.958,289.469,148.958z"/>
			<path fill="#DDA885" d="M282.24,140.75c0,0-2.303,0.095-3.063,0c-0.633-0.079-2.472-0.625-2.472-0.625s0.079,1.388,0.159,1.844
				c0.063,0.358,0.375,1.406,0.375,1.406s0.953-1.477,1.438-1.781C279.452,141.105,282.24,140.75,282.24,140.75z"/>
			<path fill="#DDA885" d="M282.834,136.094c0,0-2.758-0.124-3.656-0.313c-0.639-0.134-2.472-0.844-2.472-0.844
				s-0.249,1.736-0.185,2.313c0.049,0.447,0.531,1.719,0.531,1.719s0.391-1.796,0.844-2.156
				C278.873,136.037,282.834,136.094,282.834,136.094z"/>
			<path fill="#DDA885" d="M284.859,128.156c0,0-2.997-0.086-3.994-0.156c-0.697-0.049-2.781-0.281-2.781-0.281
				s-0.877,1.128-1.063,1.563c-0.238,0.559-0.5,2.375-0.5,2.375s1.416-2.35,2.188-2.781
				C280.06,128.119,284.859,128.156,284.859,128.156z"/>
		</g>
	</g>
	<g id="plane">
		<path fill="#CE3232" stroke="#931C24" stroke-miterlimit="10" d="M297.126,174.5c0,0,55.101,6.274,72.374,12.5
			c0.949,0.342,3.408,1.002,3.5,2.006c0.192,2.118-4.514,4.733-6.5,5.494c-15.415,5.906-66.001,2-66.001,2L297.126,174.5z"/>
		<path fill="#CE3232" stroke="#931C24" stroke-miterlimit="10" d="M225.507,174.5c0,0-55.101,6.274-72.374,12.5
			c-0.949,0.342-3.408,1.002-3.5,2.006c-0.192,2.118,4.514,4.733,6.5,5.494c15.415,5.906,66.001,2,66.001,2L225.507,174.5z"/>
		
			<ellipse fill="#CE3232" stroke="#931C24" stroke-width="0.75" stroke-miterlimit="10" cx="260.962" cy="189.006" rx="49.754" ry="42.661"/>
		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="246.625" y1="149.8066" x2="276.7061" y2="149.8066">
			<stop  offset="0" style="stop-color:#5BCBF1"/>
			<stop  offset="0.0017" style="stop-color:#5BCAF1"/>
			<stop  offset="0.1744" style="stop-color:#4197D1"/>
			<stop  offset="0.3181" style="stop-color:#2F78BC"/>
			<stop  offset="0.4256" style="stop-color:#2467B1"/>
			<stop  offset="0.4848" style="stop-color:#2061AE"/>
			<stop  offset="0.6679" style="stop-color:#2C66B1"/>
			<stop  offset="1" style="stop-color:#3B6EB6"/>
		</linearGradient>
		<path fill="url(#SVGID_1_)" stroke="#004C6D" stroke-width="0.25" stroke-miterlimit="10" d="M246.625,151.596
			c0,0,2.098,2.086,3.006,2.404c5.572,1.955,17.985,1.766,23.619,0c1.004-0.314,3.456-2.404,3.456-2.404s-3.442-6.027-5.433-7.002
			c-2.223-1.089-7.133,0.531-9.608,0.531c-2.313,0-7.461-1.542-9.541-0.531C250.123,145.567,246.625,151.596,246.625,151.596z"/>
		<path fill="#BF312F" d="M261.375,219.229c-25.047,0-45.655-16.281-48.226-37.173c-0.444,2.261-0.688,4.581-0.688,6.95
			c0,22.967,21.714,41.585,48.5,41.585c26.787,0,48.5-18.618,48.5-41.585c0-1.491-0.096-2.963-0.274-4.413
			C305.328,204.249,285.398,219.229,261.375,219.229z"/>
		<ellipse fill="#969696" stroke="#BCBEC0" stroke-width="7" stroke-miterlimit="10" cx="260.962" cy="189.006" rx="27.5" ry="25"/>
		<radialGradient id="propeller_1_" cx="261.3926" cy="188.5" r="50.9983" gradientUnits="userSpaceOnUse">
			<stop  offset="0.3011" style="stop-color:#BCBEC0"/>
			<stop  offset="0.4531" style="stop-color:#E6E7E8"/>
			<stop  offset="0.9899" style="stop-color:#F1F2F2"/>
			<stop  offset="0.9936" style="stop-color:#F9ED32"/>
		</radialGradient>
		<path id="propeller" fill="url(#propeller_1_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" d="M291.618,198.024
			l-25.939-12.274l2.33-28.48c0,0-0.02-31.189-6.862-31.182c-6.844,0.009-7.013,31.18-7.013,31.18l2.598,28.423l-26.065,12.334
			c0,0-27.001,15.611-23.572,21.534c3.429,5.923,30.507-9.517,30.507-9.517l23.541-16.62l23.541,16.62
			c0,0,27.079,15.439,30.507,9.517C318.62,213.636,291.618,198.024,291.618,198.024z M261.155,188.442l-0.013,0.022l-0.013-0.022
			H261.155z"/>
		<radialGradient id="SVGID_2_" cx="261.1426" cy="189.0049" r="11.9452" gradientUnits="userSpaceOnUse">
			<stop  offset="0" style="stop-color:#D1D3D4"/>
			<stop  offset="1" style="stop-color:#A7A9AC"/>
		</radialGradient>
		
			<ellipse fill="url(#SVGID_2_)" stroke="#6D6E71" stroke-width="2" stroke-miterlimit="10" cx="261.143" cy="189.005" rx="12.5" ry="11.363"/>
		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="155.7402" y1="175.625" x2="177.2904" y2="150.7379">
			<stop  offset="0.01" style="stop-color:#BCBEC0"/>
			<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
		</linearGradient>
		<polygon fill="url(#SVGID_3_)" points="149.627,187.171 180.5,140.842 152,186.134 		"/>
		
			<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="59.2358" y1="175.626" x2="80.786" y2="150.7389" gradientTransform="matrix(-1 0 0 1 426.1279 0)">
			<stop  offset="0.01" style="stop-color:#BCBEC0"/>
			<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
		</linearGradient>
		<polygon fill="url(#SVGID_4_)" points="373.006,187.171 342.133,140.842 370.633,186.134 		"/>
	</g>
	<rect x="260.5" y="13.75" fill="#6CBE45" width="0.462" height="217.917"/>
</g>
</svg>

Answer 1

您现在不能真正为 transform-origin 使用百分比值，因为百分比值在 Chrome 和 Firefox 中的处理方式不同。这也适用于像“center”这样的伪值，它被定义为等同于“50%”。

您需要使用绝对像素值而不是跨浏览器兼容。

如果你改变你的螺旋桨动画，使用绝对坐标，它会修复动画:

#propeller {
  transform-origin: 261px 189px;
  animation: propel 4s infinite linear;
}

我在这里使用的坐标只是构成螺旋桨轮毂的 cx 的 cy 和 <ellipse> 值。

body {text-align:center}


@keyframes adventure {
  
  10% {
    transform: translateX(5%) rotate(2deg);
  } 25% {
    transform: translateX(13%) rotate(15deg);
  } 50% {
    transform: translateX(-13%) rotate(-5deg);
  } 75% {
    transform: translateX(13%) rotate(15deg);
  } 90% {
    transform: translateX(-5%) rotate(-2deg);
  }
  
}

@keyframes navigate {
  10% {
    transform: rotate(2deg);
  } 25% {
    transform: rotate(10deg);
  } 50% {
    transform: rotate(-5deg);
  } 75% {
    transform: rotate(10deg);
  } 90% {
    transform: rotate(-2deg);
  }
}

@keyframes propel { 
  100% {transform: rotate(360deg)}
}

#fullcharacter {
  transform-origin: 50%;
  animation: adventure 5s infinite;
  -webkit-transition-timing-function: step-start;
  transition-timing-function: step-start;
}


#steering {
  transform-origin: center;
  animation: navigate 5s infinite;
}

#propeller {
  transform-origin: 261px 189px;
  animation: propel 4s infinite linear;
}

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="525px" height="250px" viewBox="0 0 525 250" enable-background="new 0 0 525 250" xml:space="preserve">
<rect fill="#81BFE9" width="525" height="250"/>
<g id="fullcharacter">
	<g id="steering">
		<path fill="#BE1E2D" d="M242.271,125.417c0,0.552-0.479,1-1.069,1h-3.03c-0.589,0-1.068-0.448-1.068-1l0,0
			c0-0.552,0.479-1,1.068-1h3.03C241.792,124.417,242.271,124.865,242.271,125.417L242.271,125.417z"/>
		<path fill="#BE1E2D" d="M286.358,125.417c0,0.551-0.479,1-1.068,1h-3.029c-0.59,0-1.068-0.449-1.068-1l0,0
			c0-0.552,0.479-0.999,1.068-0.999h3.029C285.88,124.417,286.358,124.865,286.358,125.417L286.358,125.417z"/>
		<g>
			<path fill="#DDAC85" stroke="#BA9168" stroke-width="0.5" stroke-miterlimit="10" d="M239.87,127.589c0,0,3.407-2.738,4.75-2.583
				c1.664,0.192,5.234,2.8,5,4.458c-0.225,1.591-5.795,2.781-5.795,2.781L239.87,127.589z"/>
			<path fill="#DDAC85" stroke="#BA9168" stroke-width="0.5" stroke-miterlimit="10" d="M284.354,127.589
				c0,0-3.407-2.738-4.75-2.583c-1.664,0.192-5.234,2.8-5,4.458c0.225,1.591,5.795,2.781,5.795,2.781L284.354,127.589z"/>
		</g>
		<path fill="#D6A685" stroke="#BA9168" stroke-width="0.25" stroke-miterlimit="10" d="M290.434,134.938
			c0,0,4.426,6.422,4.673,9.203c0.171,1.925-0.751,6.394-2.025,7.245c-1.815,1.214-7.728-3.23-7.728-3.23L290.434,134.938z"/>
		<path fill="#424142" stroke="#000000" stroke-width="0.25" stroke-miterlimit="10" d="M287.158,126.417h-0.908v-0.833h-5v0.833
			h-0.993c0.003,0.117,0.015,0.229,0.015,0.348v15.422c0,4.61-2.687,8.349-6,8.349h-25c-3.313,0-6-3.738-6-8.349v-15.422
			c0-0.118,0.011-0.23,0.015-0.348h-1.119v-0.833h-5v0.833h-1.199c-0.124,0.669-0.197,1.365-0.197,2.087v22.147
			c0,4.61,2.687,8.349,6,8.349h39.583c3.313,0,6-3.738,6-8.349v-22.147C287.354,127.782,287.281,127.086,287.158,126.417z"/>
		<path fill="#D6A685" stroke="#BA9168" stroke-width="0.25" stroke-miterlimit="10" d="M232.42,134.938
			c0,0-4.425,6.422-4.673,9.203c-0.171,1.925,0.751,6.394,2.025,7.245c1.815,1.214,7.727-3.23,7.727-3.23L232.42,134.938z"/>
		<g>
			<path fill="#EBB789" stroke="#C3996B" stroke-width="0.25" stroke-miterlimit="10" d="M232.876,145.963
				c0,0,0.137,0.129-0.119,0.128c-0.902-0.003,0.79,2.842,1.599,3.242c2.943,1.456,11.196,0.29,12.908-2.524
				c0.376-0.617,0.248-3.348-0.285-2.873c-1.528,1.364-4.473,0.662-4.473,0.662s2.94,0.374,4.415-0.846
				c0.787-0.65,1.082-4.528,0.128-4.141c-2.34,0.95-5.744,0.766-5.744,0.766s3.64-0.21,5.679-0.978
				c1.147-0.433,1.245-5.443,0.125-4.928c-2.998,1.379-6.156,1.212-6.156,1.212s3.492,0.042,6.086-1.379
				c1.555-0.851,0.382-7.08-1.396-6.944c-7.403,0.563-11.077,0.177-12.742,1.556c-0.732,0.605-2.092,4.076-1.278,4.599
				c0.773,0.496,1.112,0.793,1.112,0.793s-0.139,0.041-1.157-0.6c-1.301-0.816-1.986,5.729-0.506,6.143
				c0.524,0.146,0.222,0.063,0.222,0.063s0.467,0.146-0.268,0.129c-1.533-0.036,0.135,5.875,1.669,5.911
				C232.958,145.96,232.876,145.963,232.876,145.963z"/>
			<path fill="#DDA885" d="M234.458,148.958c0,0,3.333,1.917,10.792-0.958c2.289-0.882,2.256-3.986,1.541-3.312
				c-0.75,0.708-2.539,0.791-3.416,0.479c-1.875-0.667,2.438,2.127,1.75,2.416C239.068,150.126,234.458,148.958,234.458,148.958z"/>
			<path fill="#DDA885" d="M241.688,140.75c0,0,2.303,0.095,3.063,0c0.632-0.079,2.472-0.625,2.472-0.625s-0.08,1.388-0.159,1.844
				c-0.063,0.358-0.375,1.406-0.375,1.406s-0.953-1.477-1.438-1.781C244.476,141.105,241.688,140.75,241.688,140.75z"/>
			<path fill="#DDA885" d="M241.094,136.094c0,0,2.758-0.124,3.656-0.313c0.639-0.134,2.472-0.844,2.472-0.844
				s0.249,1.736,0.185,2.313c-0.049,0.447-0.531,1.719-0.531,1.719s-0.391-1.796-0.844-2.156
				C245.054,136.037,241.094,136.094,241.094,136.094z"/>
			<path fill="#DDA885" d="M239.068,128.156c0,0,2.998-0.086,3.995-0.156c0.697-0.049,2.781-0.281,2.781-0.281
				s0.877,1.128,1.063,1.563c0.238,0.559,0.5,2.375,0.5,2.375s-1.416-2.35-2.188-2.781
				C243.868,128.119,239.068,128.156,239.068,128.156z"/>
			<path fill="#EBB789" stroke="#C3996B" stroke-width="0.25" stroke-miterlimit="10" d="M291.052,145.963
				c0,0-0.138,0.129,0.119,0.128c0.901-0.003-0.79,2.842-1.599,3.242c-2.943,1.456-11.196,0.29-12.908-2.524
				c-0.376-0.617-0.248-3.348,0.285-2.873c1.527,1.364,4.473,0.662,4.473,0.662s-2.94,0.374-4.415-0.846
				c-0.786-0.65-1.082-4.528-0.128-4.141c2.34,0.95,5.743,0.766,5.743,0.766s-3.64-0.21-5.679-0.978
				c-1.148-0.433-1.246-5.443-0.126-4.928c2.997,1.379,6.155,1.212,6.155,1.212s-3.492,0.042-6.086-1.379
				c-1.555-0.851-0.381-7.08,1.396-6.944c7.403,0.563,11.077,0.177,12.742,1.556c0.732,0.605,2.092,4.076,1.279,4.599
				c-0.773,0.496-1.112,0.793-1.112,0.793s0.14,0.041,1.157-0.6c1.301-0.816,1.986,5.729,0.506,6.143
				c-0.523,0.146-0.222,0.063-0.222,0.063s-0.468,0.146,0.269,0.129c1.532-0.036-0.136,5.875-1.67,5.911
				C290.971,145.96,291.052,145.963,291.052,145.963z"/>
			<path fill="#DDA885" d="M289.469,148.958c0,0-3.332,1.917-10.791-0.958c-2.289-0.882-2.256-3.986-1.541-3.312
				c0.75,0.708,2.539,0.791,3.416,0.479c1.875-0.667-2.438,2.127-1.75,2.416C284.859,150.126,289.469,148.958,289.469,148.958z"/>
			<path fill="#DDA885" d="M282.24,140.75c0,0-2.303,0.095-3.063,0c-0.633-0.079-2.472-0.625-2.472-0.625s0.079,1.388,0.159,1.844
				c0.063,0.358,0.375,1.406,0.375,1.406s0.953-1.477,1.438-1.781C279.452,141.105,282.24,140.75,282.24,140.75z"/>
			<path fill="#DDA885" d="M282.834,136.094c0,0-2.758-0.124-3.656-0.313c-0.639-0.134-2.472-0.844-2.472-0.844
				s-0.249,1.736-0.185,2.313c0.049,0.447,0.531,1.719,0.531,1.719s0.391-1.796,0.844-2.156
				C278.873,136.037,282.834,136.094,282.834,136.094z"/>
			<path fill="#DDA885" d="M284.859,128.156c0,0-2.997-0.086-3.994-0.156c-0.697-0.049-2.781-0.281-2.781-0.281
				s-0.877,1.128-1.063,1.563c-0.238,0.559-0.5,2.375-0.5,2.375s1.416-2.35,2.188-2.781
				C280.06,128.119,284.859,128.156,284.859,128.156z"/>
		</g>
	</g>
	<g id="plane">
		<path fill="#CE3232" stroke="#931C24" stroke-miterlimit="10" d="M297.126,174.5c0,0,55.101,6.274,72.374,12.5
			c0.949,0.342,3.408,1.002,3.5,2.006c0.192,2.118-4.514,4.733-6.5,5.494c-15.415,5.906-66.001,2-66.001,2L297.126,174.5z"/>
		<path fill="#CE3232" stroke="#931C24" stroke-miterlimit="10" d="M225.507,174.5c0,0-55.101,6.274-72.374,12.5
			c-0.949,0.342-3.408,1.002-3.5,2.006c-0.192,2.118,4.514,4.733,6.5,5.494c15.415,5.906,66.001,2,66.001,2L225.507,174.5z"/>
		
			<ellipse fill="#CE3232" stroke="#931C24" stroke-width="0.75" stroke-miterlimit="10" cx="260.962" cy="189.006" rx="49.754" ry="42.661"/>
		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="246.625" y1="149.8066" x2="276.7061" y2="149.8066">
			<stop  offset="0" style="stop-color:#5BCBF1"/>
			<stop  offset="0.0017" style="stop-color:#5BCAF1"/>
			<stop  offset="0.1744" style="stop-color:#4197D1"/>
			<stop  offset="0.3181" style="stop-color:#2F78BC"/>
			<stop  offset="0.4256" style="stop-color:#2467B1"/>
			<stop  offset="0.4848" style="stop-color:#2061AE"/>
			<stop  offset="0.6679" style="stop-color:#2C66B1"/>
			<stop  offset="1" style="stop-color:#3B6EB6"/>
		</linearGradient>
		<path fill="url(#SVGID_1_)" stroke="#004C6D" stroke-width="0.25" stroke-miterlimit="10" d="M246.625,151.596
			c0,0,2.098,2.086,3.006,2.404c5.572,1.955,17.985,1.766,23.619,0c1.004-0.314,3.456-2.404,3.456-2.404s-3.442-6.027-5.433-7.002
			c-2.223-1.089-7.133,0.531-9.608,0.531c-2.313,0-7.461-1.542-9.541-0.531C250.123,145.567,246.625,151.596,246.625,151.596z"/>
		<path fill="#BF312F" d="M261.375,219.229c-25.047,0-45.655-16.281-48.226-37.173c-0.444,2.261-0.688,4.581-0.688,6.95
			c0,22.967,21.714,41.585,48.5,41.585c26.787,0,48.5-18.618,48.5-41.585c0-1.491-0.096-2.963-0.274-4.413
			C305.328,204.249,285.398,219.229,261.375,219.229z"/>
		<ellipse fill="#969696" stroke="#BCBEC0" stroke-width="7" stroke-miterlimit="10" cx="260.962" cy="189.006" rx="27.5" ry="25"/>
		<radialGradient id="propeller_1_" cx="261.3926" cy="188.5" r="50.9983" gradientUnits="userSpaceOnUse">
			<stop  offset="0.3011" style="stop-color:#BCBEC0"/>
			<stop  offset="0.4531" style="stop-color:#E6E7E8"/>
			<stop  offset="0.9899" style="stop-color:#F1F2F2"/>
			<stop  offset="0.9936" style="stop-color:#F9ED32"/>
		</radialGradient>
		<path id="propeller" fill="url(#propeller_1_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" d="M291.618,198.024
			l-25.939-12.274l2.33-28.48c0,0-0.02-31.189-6.862-31.182c-6.844,0.009-7.013,31.18-7.013,31.18l2.598,28.423l-26.065,12.334
			c0,0-27.001,15.611-23.572,21.534c3.429,5.923,30.507-9.517,30.507-9.517l23.541-16.62l23.541,16.62
			c0,0,27.079,15.439,30.507,9.517C318.62,213.636,291.618,198.024,291.618,198.024z M261.155,188.442l-0.013,0.022l-0.013-0.022
			H261.155z"/>
		<radialGradient id="SVGID_2_" cx="261.1426" cy="189.0049" r="11.9452" gradientUnits="userSpaceOnUse">
			<stop  offset="0" style="stop-color:#D1D3D4"/>
			<stop  offset="1" style="stop-color:#A7A9AC"/>
		</radialGradient>
		
			<ellipse fill="url(#SVGID_2_)" stroke="#6D6E71" stroke-width="2" stroke-miterlimit="10" cx="261.143" cy="189.005" rx="12.5" ry="11.363"/>
		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="155.7402" y1="175.625" x2="177.2904" y2="150.7379">
			<stop  offset="0.01" style="stop-color:#BCBEC0"/>
			<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
		</linearGradient>
		<polygon fill="url(#SVGID_3_)" points="149.627,187.171 180.5,140.842 152,186.134 		"/>
		
			<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="59.2358" y1="175.626" x2="80.786" y2="150.7389" gradientTransform="matrix(-1 0 0 1 426.1279 0)">
			<stop  offset="0.01" style="stop-color:#BCBEC0"/>
			<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
		</linearGradient>
		<polygon fill="url(#SVGID_4_)" points="373.006,187.171 342.133,140.842 370.633,186.134 		"/>
	</g>
	<rect x="260.5" y="13.75" fill="#6CBE45" width="0.462" height="217.917"/>
</g>
</svg>