如何使SVG中的Wings与css3动画一起移动
我有这个用SVG制作的翅膀，我想在.wing类中应用飞行效果，但如果我尝试，动画将无法正确发生。
SVG中的动画：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
svg {
-webkit-animation:fly 1s linear infinite;
}
@-webkit-keyframes fly {
50% {
-webkit-transform: rotate(20deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!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="183px" height="159.5px" viewBox="0 0 183 159.5" enable-background="new 0 0 183 159.5" xml:space="preserve">
<g class="wings">
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.835,81.005c-2.062,0.463-4.049,0.568-6.003,0.018
c-0.752-0.213-1.551-0.514-2.136-1.006c-1.08-0.91-1.619-2.482,0.424-3.371c0.217-0.096,0.459-0.129,0.681-0.217
c3.698-1.48,7.59-2.438,11.198-4.164c1.65-0.79,3.332-1.513,4.958-2.247c0.093-2.03,1.316-2.938,2.914-3.51
c0.3-0.108,0.612-0.187,0.923-0.256c2.5-0.555,4.93-1.344,7.224-2.469c2.792-1.37,5.543-2.83,8.268-4.329
c2.241-1.233,4.562-1.794,7.129-1.482c2.697,0.327,4.362,2.809,3.448,5.334c-0.188,0.523-0.463,1.017-0.707,1.519
c-2.003,4.092-3.637,8.322-4.689,12.76c-0.237,1-0.861,1.428-1.783,1.684c-1.069,0.297-2.036-0.125-3.095-0.34
c-0.453,0.303-0.95,0.566-1.363,0.926c-1.442,1.26-2.899,2.504-4.265,3.842c-1.447,1.418-3.165,1.896-5.059,1.482
c-0.96-0.211-1.825-0.854-2.907-1.387c-2.312,0.957-4.757,1.131-6.948-0.859C35.893,83.944,33.045,83.702,30.835,81.005z
M52.091,74.009c2.577-0.914,4.953-2.223,6.999-4.054c1.069-0.956,2.034-2.026,3.072-3.017c0.501-0.479,0.817-0.397,1.618,0.354
c-2.516,3.723-6.121,6.11-10.096,8.065c1.243,1.246,2.181,1.549,3.383,0.82c1.077-0.652,2.05-1.506,2.98-2.365
c0.816-0.754,1.489-1.662,2.275-2.453c0.172-0.172,0.746-0.26,0.812-0.163c0.206,0.297,0.439,0.776,0.33,1.049
c-0.232,0.574-0.633,1.102-1.042,1.582c-0.926,1.082-1.897,2.123-2.853,3.184c0.903,0.711,0.898,0.725,2.389,0.834
c0.196-0.365,0.489-0.75,0.623-1.184c1.394-4.514,3.022-8.919,5.588-12.927c0.253-0.395,0.393-0.875,0.52-1.334
c0.4-1.457-0.154-2.567-1.645-2.927c-1.553-0.376-3.172-0.5-4.696,0.159c-1.682,0.727-3.391,1.437-4.965,2.363
c-2.829,1.664-5.775,3.057-8.81,4.279c-1.258,0.506-2.537,0.966-3.829,1.377c-0.996,0.317-1.942,0.675-2.69,1.473
c0.34,1.451,1.42,1.95,2.647,1.993c2.126,0.075,4.197-0.076,6.292-0.812c3.508-1.232,6.669-2.973,9.573-5.248
c0.18-0.141,0.42-0.226,0.646-0.278c0.135-0.031,0.372,0.005,0.43,0.096c0.113,0.181,0.257,0.528,0.177,0.618
c-0.58,0.647-1.127,1.382-1.844,1.839c-2.554,1.626-5.103,3.295-8.075,4.096c-1.075,0.29-1.998,0.863-3.045,1.271
C50.092,74.313,50.572,74.548,52.091,74.009z M24.532,77.942c-0.198,0.07-0.339,0.301-0.634,0.574
c0.324,0.354,0.562,0.818,0.931,0.977c1.34,0.574,2.798,0.887,4.212,0.588c2.166-0.459,4.382-0.699,6.444-1.674
c3.159-1.494,6.402-2.809,9.6-4.221c0.646-0.285,1.247-0.664,1.806-0.965c0.128-0.588-0.289-0.693-0.532-0.672
c-1.886,0.158-3.631-0.211-5.238-1.39C35.735,73.864,30.151,75.948,24.532,77.942z M47.34,74.364
c-1.532,0.715-3.106,1.449-4.68,2.186c-1.578,0.738-3.161,1.465-4.729,2.221c-1.532,0.74-3.364,0.848-4.747,2.141
c0.633,0.898,1.437,1.084,2.329,1.137c1.309,0.078,2.529-0.336,3.71-0.764c2.313-0.84,4.556-1.859,6.632-3.211
c0.53-0.344,1.108-0.611,1.654-0.932c0.671-0.395,1.332-0.805,2.188-1.324C48.721,75.216,48.057,74.806,47.34,74.364z
M51.208,76.788c-1.247,0.695-2.475,1.43-3.733,2.102c-1.746,0.934-3.518,1.82-5.273,2.736c-0.336,0.176-0.652,0.387-0.938,0.559
c0.005,0.697,0.514,0.752,0.826,0.73c0.854-0.061,1.747-0.115,2.538-0.408c2.134-0.791,6.32-3.355,8.476-5.064
C52.546,76.626,51.975,76.36,51.208,76.788z M54.158,78.794c-1.699,1.184-3.457,2.279-5.185,3.418
c-0.257,0.17-0.484,0.379-0.872,0.689c0.466,0.33,0.796,0.734,1.189,0.807c0.885,0.166,1.759-0.039,2.471-0.631
c1.951-1.625,3.884-3.271,6.235-5.258C56.296,77.937,55.185,78.081,54.158,78.794z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FEF4F3" d="M48.856,72.7c1.235,1.613,1.716,1.848,3.234,1.309
c2.577-0.914,4.953-2.223,6.999-4.054c1.069-0.956,2.034-2.026,3.072-3.017c0.501-0.479,0.817-0.397,1.618,0.354
c-2.516,3.723-6.121,6.11-10.096,8.065c1.243,1.246,2.181,1.549,3.383,0.82c1.077-0.652,2.05-1.506,2.98-2.365
c0.816-0.754,1.489-1.662,2.275-2.453c0.172-0.172,0.746-0.26,0.812-0.163c0.206,0.297,0.439,0.776,0.33,1.049
c-0.232,0.574-0.633,1.102-1.042,1.582c-0.926,1.082-1.897,2.123-2.853,3.184c0.903,0.711,0.898,0.725,2.389,0.834
c0.196-0.365,0.489-0.75,0.623-1.184c1.394-4.514,3.022-8.919,5.588-12.927c0.253-0.395,0.393-0.875,0.52-1.334
c0.4-1.457-0.154-2.567-1.645-2.927c-1.553-0.376-3.172-0.5-4.696,0.159c-1.682,0.727-3.391,1.437-4.965,2.363
c-2.829,1.664-5.775,3.057-8.81,4.279c-1.258,0.506-2.537,0.966-3.829,1.377c-0.996,0.317-1.942,0.675-2.69,1.473
c0.34,1.451,1.42,1.95,2.647,1.993c2.126,0.075,4.197-0.076,6.292-0.812c3.508-1.232,6.669-2.973,9.573-5.248
c0.18-0.141,0.42-0.226,0.646-0.278c0.135-0.031,0.372,0.005,0.43,0.096c0.113,0.181,0.257,0.528,0.177,0.618
c-0.58,0.647-1.127,1.382-1.844,1.839c-2.554,1.626-5.103,3.295-8.075,4.096C50.826,71.719,49.903,72.292,48.856,72.7z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FEF4F3" d="M41.12,71.16c-5.385,2.705-10.969,4.789-16.588,6.783
c-0.198,0.07-0.339,0.301-0.634,0.574c0.324,0.354,0.562,0.818,0.931,0.977c1.34,0.574,2.798,0.887,4.212,0.588
c2.166-0.459,4.382-0.699,6.444-1.674c3.159-1.494,6.402-2.809,9.6-4.221c0.646-0.285,1.247-0.664,1.806-0.965
c0.128-0.588-0.289-0.693-0.532-0.672C44.473,72.708,42.728,72.339,41.12,71.16z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FEF4F3" d="M49.697,75.817c-0.977-0.602-1.641-1.012-2.357-1.453
c-1.532,0.715-3.106,1.449-4.68,2.186c-1.578,0.738-3.161,1.465-4.729,2.221c-1.532,0.74-3.364,0.848-4.747,2.141
c0.633,0.898,1.437,1.084,2.329,1.137c1.309,0.078,2.529-0.336,3.71-0.764c2.313-0.84,4.556-1.859,6.632-3.211
c0.53-0.344,1.108-0.611,1.654-0.932C48.18,76.747,48.841,76.337,49.697,75.817z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FEF4F3" d="M53.104,77.442c-0.558-0.816-1.129-1.082-1.896-0.654
c-1.247,0.695-2.475,1.43-3.733,2.102c-1.746,0.934-3.518,1.82-5.273,2.736c-0.336,0.176-0.652,0.387-0.938,0.559
c0.005,0.697,0.514,0.752,0.826,0.73c0.854-0.061,1.747-0.115,2.538-0.408C46.762,81.716,50.948,79.151,53.104,77.442z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FEF4F3" d="M57.997,77.819c-1.701,0.117-2.812,0.262-3.839,0.975
c-1.699,1.184-3.457,2.279-5.185,3.418c-0.257,0.17-0.484,0.379-0.872,0.689c0.466,0.33,0.796,0.734,1.189,0.807
c0.885,0.166,1.759-0.039,2.471-0.631C53.713,81.452,55.646,79.806,57.997,77.819z"/>
</g>
</svg>
.wings中的动画：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.wings {
-webkit-animation:fly 1s linear infinite;
}
@-webkit-keyframes fly {
50% {
-webkit-transform: rotate(20deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!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="183px" height="159.5px" viewBox="0 0 183 159.5" enable-background="new 0 0 183 159.5" xml:space="preserve">
<g class="wings">
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.835,81.005c-2.062,0.463-4.049,0.568-6.003,0.018
c-0.752-0.213-1.551-0.514-2.136-1.006c-1.08-0.91-1.619-2.482,0.424-3.371c0.217-0.096,0.459-0.129,0.681-0.217
c3.698-1.48,7.59-2.438,11.198-4.164c1.65-0.79,3.332-1.513,4.958-2.247c0.093-2.03,1.316-2.938,2.914-3.51
c0.3-0.108,0.612-0.187,0.923-0.256c2.5-0.555,4.93-1.344,7.224-2.469c2.792-1.37,5.543-2.83,8.268-4.329
c2.241-1.233,4.562-1.794,7.129-1.482c2.697,0.327,4.362,2.809,3.448,5.334c-0.188,0.523-0.463,1.017-0.707,1.519
c-2.003,4.092-3.637,8.322-4.689,12.76c-0.237,1-0.861,1.428-1.783,1.684c-1.069,0.297-2.036-0.125-3.095-0.34
c-0.453,0.303-0.95,0.566-1.363,0.926c-1.442,1.26-2.899,2.504-4.265,3.842c-1.447,1.418-3.165,1.896-5.059,1.482
c-0.96-0.211-1.825-0.854-2.907-1.387c-2.312,0.957-4.757,1.131-6.948-0.859C35.893,83.944,33.045,83.702,30.835,81.005z
M52.091,74.009c2.577-0.914,4.953-2.223,6.999-4.054c1.069-0.956,2.034-2.026,3.072-3.017c0.501-0.479,0.817-0.397,1.618,0.354
c-2.516,3.723-6.121,6.11-10.096,8.065c1.243,1.246,2.181,1.549,3.383,0.82c1.077-0.652,2.05-1.506,2.98-2.365
c0.816-0.754,1.489-1.662,2.275-2.453c0.172-0.172,0.746-0.26,0.812-0.163c0.206,0.297,0.439,0.776,0.33,1.049
c-0.232,0.574-0.633,1.102-1.042,1.582c-0.926,1.082-1.897,2.123-2.853,3.184c0.903,0.711,0.898,0.725,2.389,0.834
c0.196-0.365,0.489-0.75,0.623-1.184c1.394-4.514,3.022-8.919,5.588-12.927c0.253-0.395,0.393-0.875,0.52-1.334
c0.4-1.457-0.154-2.567-1.645-2.927c-1.553-0.376-3.172-0.5-4.696,0.159c-1.682,0.727-3.391,1.437-4.965,2.363
c-2.829,1.664-5.775,3.057-8.81,4.279c-1.258,0.506-2.537,0.966-3.829,1.377c-0.996,0.317-1.942,0.675-2.69,1.473
c0.34,1.451,1.42,1.95,2.647,1.993c2.126,0.075,4.197-0.076,6.292-0.812c3.508-1.232,6.669-2.973,9.573-5.248
c0.18-0.141,0.42-0.226,0.646-0.278c0.135-0.031,0.372,0.005,0.43,0.096c0.113,0.181,0.257,0.528,0.177,0.618
c-0.58,0.647-1.127,1.382-1.844,1.839c-2.554,1.626-5.103,3.295-8.075,4.096c-1.075,0.29-1.998,0.863-3.045,1.271
C50.092,74.313,50.572,74.548,52.091,74.009z M24.532,77.942c-0.198,0.07-0.339,0.301-0.634,0.574
c0.324,0.354,0.562,0.818,0.931,0.977c1.34,0.574,2.798,0.887,4.212,0.588c2.166-0.459,4.382-0.699,6.444-1.674
c3.159-1.494,6.402-2.809,9.6-4.221c0.646-0.285,1.247-0.664,1.806-0.965c0.128-0.588-0.289-0.693-0.532-0.672
c-1.886,0.158-3.631-0.211-5.238-1.39C35.735,73.864,30.151,75.948,24.532,77.942z M47.34,74.364
c-1.532,0.715-3.106,1.449-4.68,2.186c-1.578,0.738-3.161,1.465-4.729,2.221c-1.532,0.74-3.364,0.848-4.747,2.141
c0.633,0.898,1.437,1.084,2.329,1.137c1.309,0.078,2.529-0.336,3.71-0.764c2.313-0.84,4.556-1.859,6.632-3.211
c0.53-0.344,1.108-0.611,1.654-0.932c0.671-0.395,1.332-0.805,2.188-1.324C48.721,75.216,48.057,74.806,47.34,74.364z
M51.208,76.788c-1.247,0.695-2.475,1.43-3.733,2.102c-1.746,0.934-3.518,1.82-5.273,2.736c-0.336,0.176-0.652,0.387-0.938,0.559
c0.005,0.697,0.514,0.752,0.826,0.73c0.854-0.061,1.747-0.115,2.538-0.408c2.134-0.791,6.32-3.355,8.476-5.064
C52.546,76.626,51.975,76.36,51.208,76.788z M54.158,78.794c-1.699,1.184-3.457,2.279-5.185,3.418
c-0.257,0.17-0.484,0.379-0.872,0.689c0.466,0.33,0.796,0.734,1.189,0.807c0.885,0.166,1.759-0.039,2.471-0.631
c1.951-1.625,3.884-3.271,6.235-5.258C56.296,77.937,55.185,78.081,54.158,78.794z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FEF4F3" d="M48.856,72.7c1.235,1.613,1.716,1.848,3.234,1.309
c2.577-0.914,4.953-2.223,6.999-4.054c1.069-0.956,2.034-2.026,3.072-3.017c0.501-0.479,0.817-0.397,1.618,0.354
c-2.516,3.723-6.121,6.11-10.096,8.065c1.243,1.246,2.181,1.549,3.383,0.82c1.077-0.652,2.05-1.506,2.98-2.365
c0.816-0.754,1.489-1.662,2.275-2.453c0.172-0.172,0.746-0.26,0.812-0.163c0.206,0.297,0.439,0.776,0.33,1.049
c-0.232,0.574-0.633,1.102-1.042,1.582c-0.926,1.082-1.897,2.123-2.853,3.184c0.903,0.711,0.898,0.725,2.389,0.834
c0.196-0.365,0.489-0.75,0.623-1.184c1.394-4.514,3.022-8.919,5.588-12.927c0.253-0.395,0.393-0.875,0.52-1.334
c0.4-1.457-0.154-2.567-1.645-2.927c-1.553-0.376-3.172-0.5-4.696,0.159c-1.682,0.727-3.391,1.437-4.965,2.363
c-2.829,1.664-5.775,3.057-8.81,4.279c-1.258,0.506-2.537,0.966-3.829,1.377c-0.996,0.317-1.942,0.675-2.69,1.473
c0.34,1.451,1.42,1.95,2.647,1.993c2.126,0.075,4.197-0.076,6.292-0.812c3.508-1.232,6.669-2.973,9.573-5.248
c0.18-0.141,0.42-0.226,0.646-0.278c0.135-0.031,0.372,0.005,0.43,0.096c0.113,0.181,0.257,0.528,0.177,0.618
c-0.58,0.647-1.127,1.382-1.844,1.839c-2.554,1.626-5.103,3.295-8.075,4.096C50.826,71.719,49.903,72.292,48.856,72.7z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FEF4F3" d="M41.12,71.16c-5.385,2.705-10.969,4.789-16.588,6.783
c-0.198,0.07-0.339,0.301-0.634,0.574c0.324,0.354,0.562,0.818,0.931,0.977c1.34,0.574,2.798,0.887,4.212,0.588
c2.166-0.459,4.382-0.699,6.444-1.674c3.159-1.494,6.402-2.809,9.6-4.221c0.646-0.285,1.247-0.664,1.806-0.965
c0.128-0.588-0.289-0.693-0.532-0.672C44.473,72.708,42.728,72.339,41.12,71.16z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FEF4F3" d="M49.697,75.817c-0.977-0.602-1.641-1.012-2.357-1.453
c-1.532,0.715-3.106,1.449-4.68,2.186c-1.578,0.738-3.161,1.465-4.729,2.221c-1.532,0.74-3.364,0.848-4.747,2.141
c0.633,0.898,1.437,1.084,2.329,1.137c1.309,0.078,2.529-0.336,3.71-0.764c2.313-0.84,4.556-1.859,6.632-3.211
c0.53-0.344,1.108-0.611,1.654-0.932C48.18,76.747,48.841,76.337,49.697,75.817z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FEF4F3" d="M53.104,77.442c-0.558-0.816-1.129-1.082-1.896-0.654
c-1.247,0.695-2.475,1.43-3.733,2.102c-1.746,0.934-3.518,1.82-5.273,2.736c-0.336,0.176-0.652,0.387-0.938,0.559
c0.005,0.697,0.514,0.752,0.826,0.73c0.854-0.061,1.747-0.115,2.538-0.408C46.762,81.716,50.948,79.151,53.104,77.442z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FEF4F3" d="M57.997,77.819c-1.701,0.117-2.812,0.262-3.839,0.975
c-1.699,1.184-3.457,2.279-5.185,3.418c-0.257,0.17-0.484,0.379-0.872,0.689c0.466,0.33,0.796,0.734,1.189,0.807
c0.885,0.166,1.759-0.039,2.471-0.631C53.713,81.452,55.646,79.806,57.997,77.819z"/>
</g>
</svg>
为什么会这样？动画如何像这样改变，以及如何修复？
泰
1 个答案:
答案 0 :(得分：1)
这是因为SVG坐标系与CSS框模型不同，并且Understanding SVG Coordinate Systems and Transformations上有一系列文章（其中有关于旋转和动画的其他文章的顶部链接）可以采取了解将CSS直接应用于SVG时需要考虑的一些事项。
它看起来非常像.wings CSS围绕图像左上角的（0,0）原点旋转机翼（我在SVG元素中添加了一个红色边框（在CSS中），所以你可以看到在这两种情况下发生了什么）
但.svg正在将变换应用于SVG的整个视图框，并将其转换到该视图框的正中心（中点）。
因此，您需要应用转换以允许转换原点。
因此，您可以在每个＆＃34;可移动的＆＃34;上明确地将机翼的原点和动画放入SVG文件中。项目或加载多个SVG文件并将它们整体应用并使用单独的文件为多个移动部件设置动画或计算出transform-origin：您需要在CSS中应用以实现相同的目的。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？