我使用Illustrator设计了徽标，并保存为SVG文件。在SVG文件中，我使用不同组的类创建了旋转animation1和animation2的样式，我在html中通过标记调用了svg文件。 Animation1作为默认值处于活动状态，animation2不是。当我使用外部jQuery单击此徽标时，我想要切换此类（group1为group1，class2为gorup2）。我的SVG文件是：
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.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="200px" height="120px" viewBox="0 0 362 363" enable-background="new 0 0 362 363" xml:space="preserve">
<defs>
<style type="text/css">
tspan{
font-family: 'Lato', sans-serif;
}
.animation1 {
-webkit-animation: animCircle 3s linear infinite;
-o-animation: animCircle 3s linear infinite;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
}
@-webkit-keyframes animCircle{
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-o-keyframes animCircle{
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
.animation {
-webkit-animation: animCircle 5s linear infinite;
-o-animation: animCircle 5s linear infinite;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
}
@-webkit-keyframes animCircle{
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-o-keyframes animCircle{
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
</style>
<script type="text/javascript" xlink:href="js/custom.js" xlink:actuate="onLoad" xlink:show="other" xlink:type="simple" />
</defs>
<g id="emblem" class="animation1">
<g id="iconLogo">
<path fill="#005B9A" stroke="#FFFFFF" stroke-width="7" stroke-miterlimit="10" d="M357.67,148.25v67.5h-16.15
c-4.24,20.25-12.21,39.12-23.17,55.87l11.44,11.44l-47.73,47.73l-11.44-11.44c-16.75,10.96-35.62,18.93-55.87,23.17v16.15h-67.5
v-16.15c-20.25-4.24-39.12-12.21-55.87-23.17l-11.44,11.44l-47.73-47.73l11.44-11.44C32.69,254.87,24.72,236,20.48,215.75H4.33
v-67.5h16.15c4.24-20.25,12.21-39.12,23.17-55.87L32.21,80.94l47.73-47.73l11.44,11.44c16.75-10.96,35.62-18.93,55.87-23.17V5.33
h67.5v16.15c20.25,4.24,39.12,12.21,55.87,23.17l11.44-11.44l47.73,47.73l-11.44,11.44c10.96,16.75,18.93,35.62,23.17,55.87H357.67z
"/>
<path fill="#FFFFFF" d="M208.754,208.408c-12.424,12.424-31.678,13.873-45.693,4.327l-5.042,5.042l-9.546-9.546l5.042-5.042
c-9.546-14.015-8.096-33.269,4.327-45.693c14.057-14.057,36.854-14.057,50.912,0C222.811,171.553,222.811,194.35,208.754,208.408z"
/>
</g>
<g>
<circle fill="none" cx="183.297" cy="182.953" r="109.277"/>
<text transform="matrix(0.8249 -0.5653 0.5653 0.8249 109.9386 100.7383)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="48.1427">V</tspan><tspan x="27.717" y="0.077" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="48.1427" rotate="13.856">E</tspan><tspan x="52.298" y="5.961" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="48.1427" rotate="27.614">K</tspan><tspan x="76.389" y="18.466" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="48.1427" rotate="41.684">T</tspan><tspan x="97.016" y="36.296" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="48.1427" rotate="57.125">O</tspan><tspan x="114.044" y="63.021" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="48.1427" rotate="72.517">R</tspan></text>
<circle fill="none" cx="183.297" cy="182.953" r="133.77"/>
<text transform="matrix(0.2461 0.9692 -0.9692 0.2461 49.5323 199.7095)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40">m</tspan><tspan x="37.252" y="-1.18" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-13.269">a</tspan><tspan x="60.306" y="-7.04" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-22.408">š</tspan><tspan x="77.09" y="-14.247" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-29.238">i</tspan><tspan x="89.377" y="-20.906" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-37.504">n</tspan><tspan x="108.688" y="-36.317" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-46.873">s</tspan><tspan x="121.576" y="-50.158" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-55.687">k</tspan><tspan x="134.513" y="-69.532" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-65.856">a</tspan><tspan x="143.672" y="-91.19" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-74.068"> </tspan><tspan x="147.53" y="-104.779" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-80.884">r</tspan><tspan x="150.427" y="-122.863" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-89.86">a</tspan><tspan x="150.245" y="-147.132" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-100.445">d</tspan><tspan x="145.187" y="-171.404" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-108.708">i</tspan><tspan x="140.896" y="-184.64" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-116.823">o</tspan><tspan x="129.464" y="-206.605" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-127.571">n</tspan><tspan x="114.182" y="-225.557" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-135.775">i</tspan><tspan x="104.422" y="-235.227" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-143.335">c</tspan><tspan x="85.943" y="-248.721" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-153.366">a</tspan></text>
</g>
</g>
</svg>
任何帮助？