提琴和摘录下面的内容：https://jsfiddle.net/e130kr2x/
我希望svg在我的一个标签处于活动状态（实现）时进行动画处理，而在我打开新标签页时不显示或淡出（未实现）。现在，该新标签页将处于活动状态并为svg设置动画，以此类推（已实现）。
-第一个问题：我确实在html中为每个标签复制了svg。有没有办法只在CSS中执行此操作，而不是在每个选项卡中复制svg？我考虑过image属性，但它不支持动画。
-第二个问题：我在每个活动选项卡下都有svg动画，但仍处于非活动选项卡下。标签不活动时如何使其不显示或淡出？
也有点题外话，但是如果有人可以告诉我如何在js文件而不是html文件中移动js脚本，我将不胜感激。我还是js新手。谢谢您的建议。
#my-tab{
` margin-top:20px;
overflow:hidden;
display:block;}
#my-tab ul.tabs{
display:block;
margin:0;
padding:0;
list-style-type:none;}
#my-tab ul.tabs > li{
display:block;
float:left;
margin-bottom:0;
padding:0;
width:17%}
#my-tab ul.tabs li a{
font-size:15px;
height:45px;
line-height:30px;
margin:0;
padding:7px 12px;
text-decoration:none;
width:auto;
font-weight:700;
color:#303030;}
.flex2 {
display: flex;
justify-content: space-evenly;
flex-wrap:wrap;
padding: 0 10px;}
/* SVG ANIMATION bELLOW */
#my-tab ul.tabs li a.active path {
stroke:#6594F6;
fill:#6594F6;
stroke-dasharray:330;
opacity:1;
animation: animate 3s cubic-bezier(.27,.6,.8,.77);}
@keyframes animate {
0% {
opacity:0;
fill:none;
stroke-dashoffset:330;
}
30% {
opacity:1;
fill:none;
stroke-dashoffset:330;
}
90% {
fill: rgba(255,255,255,0);
}
100% {
opacity:1;
fill: rgba(255,255,255,1);
stroke-dashoffset:0;
}
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<script>$(document).ready(function(){$("ul.tabs").each(function(){var t,i,a=$(this).find("a");t=a.first().addClass("active"),i=$(t.attr("href")),a.not(":first").each(function(){$($(this).attr("href")).hide()}),$(this).find("a").click(function(a){return t.removeClass("active"),i.hide(),t=$(this),i=$($(this).attr("href")),t.addClass("active"),i.show(),!1})})});</script>
<div class="product-description" itemprop="description">
<div id="my-tab" class="my-tab">
<ul class="tabs">
<div class="flex2">
<li><a href="#tab-1"><span class="tab1 text-link1">
Description
<svg version="1.1" class="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 148.1 30.3" enable-background="new 0 0 148.1 30.3" xml:space="preserve">
<g>
<g>
<path fill="#6594F6" d="M-260.1-275.3c20.9-13.8,44.3-23,68.9-27.2c12.7-2.2,26-3,38.8-1.8c13.3,1.3,25.3,8.2,38.1,11.6
c40.1,10.5,84.9-0.9,115.5-28.6c1.4-1.3-0.7-3.4-2.1-2.1c-32.7,29.7-81,39.3-122.7,24.8c-5.8-2-11.5-4.5-17.4-6.3
c-6.2-1.9-12.6-2.5-19.1-2.7c-11.9-0.4-23.8,0.8-35.4,2.9c-23.6,4.3-46.2,13.6-66.2,26.9C-263.2-276.8-261.7-274.2-260.1-275.3
L-260.1-275.3z"/>
</g>
</g>
<g>
<g>
<path fill="#6594F6" d="M7,17.4c9.2,3.6,20.1,1.3,26-6.9c1.2-1.6-4.2-1.6-5.1-1c-6.9,5.1-0.8,12.6,5.1,14.6
c4.2,1.4,9,0.8,13.2,0.4c6.3-0.7,12.5-1.9,18.6-3.2c23.9-5,49.1-12.4,72.4-1.3c1.2,0.6,6.7-0.4,4.6-1.6
c-16.1-9.9-35.3-9.8-53.3-6.8c-11.2,1.8-22.1,4.9-33.2,7.3c-5.4,1.1-10.9,2.2-16.4,2.5c-5,0.3-12-6.3-6.4-10.6
c-1.7-0.3-3.4-0.6-5.1-1c-3.9,5.4-10.4,8.4-16.9,5.9C9.4,15.3,4.4,16.4,7,17.4L7,17.4z"/>
</g>
</g>
</svg>
</span></a></li>
<li><a href="#tab-2"><i class="fa fa-truck fa-flip-horizontal truckicon-black"></i>
Livraison
<svg version="1.1" class="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 148.1 30.3" enable-background="new 0 0 148.1 30.3" xml:space="preserve">
<g>
<g>
<path fill="#6594F6" d="M-260.1-275.3c20.9-13.8,44.3-23,68.9-27.2c12.7-2.2,26-3,38.8-1.8c13.3,1.3,25.3,8.2,38.1,11.6
c40.1,10.5,84.9-0.9,115.5-28.6c1.4-1.3-0.7-3.4-2.1-2.1c-32.7,29.7-81,39.3-122.7,24.8c-5.8-2-11.5-4.5-17.4-6.3
c-6.2-1.9-12.6-2.5-19.1-2.7c-11.9-0.4-23.8,0.8-35.4,2.9c-23.6,4.3-46.2,13.6-66.2,26.9C-263.2-276.8-261.7-274.2-260.1-275.3
L-260.1-275.3z"/>
</g>
</g>
<g>
<g>
<path fill="#6594F6" d="M7,17.4c9.2,3.6,20.1,1.3,26-6.9c1.2-1.6-4.2-1.6-5.1-1c-6.9,5.1-0.8,12.6,5.1,14.6
c4.2,1.4,9,0.8,13.2,0.4c6.3-0.7,12.5-1.9,18.6-3.2c23.9-5,49.1-12.4,72.4-1.3c1.2,0.6,6.7-0.4,4.6-1.6
c-16.1-9.9-35.3-9.8-53.3-6.8c-11.2,1.8-22.1,4.9-33.2,7.3c-5.4,1.1-10.9,2.2-16.4,2.5c-5,0.3-12-6.3-6.4-10.6
c-1.7-0.3-3.4-0.6-5.1-1c-3.9,5.4-10.4,8.4-16.9,5.9C9.4,15.3,4.4,16.4,7,17.4L7,17.4z"/>
</g>
</g>
</svg>
</a></li>
<li><a href="#tab-3"><span class="tab4">
Nos avantages
<svg version="1.1" class="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 148.1 30.3" enable-background="new 0 0 148.1 30.3" xml:space="preserve">
<g>
<g>
<path fill="#6594F6" d="M-260.1-275.3c20.9-13.8,44.3-23,68.9-27.2c12.7-2.2,26-3,38.8-1.8c13.3,1.3,25.3,8.2,38.1,11.6
c40.1,10.5,84.9-0.9,115.5-28.6c1.4-1.3-0.7-3.4-2.1-2.1c-32.7,29.7-81,39.3-122.7,24.8c-5.8-2-11.5-4.5-17.4-6.3
c-6.2-1.9-12.6-2.5-19.1-2.7c-11.9-0.4-23.8,0.8-35.4,2.9c-23.6,4.3-46.2,13.6-66.2,26.9C-263.2-276.8-261.7-274.2-260.1-275.3
L-260.1-275.3z"/>
</g>
</g>
<g>
<g>
<path fill="#6594F6" d="M7,17.4c9.2,3.6,20.1,1.3,26-6.9c1.2-1.6-4.2-1.6-5.1-1c-6.9,5.1-0.8,12.6,5.1,14.6
c4.2,1.4,9,0.8,13.2,0.4c6.3-0.7,12.5-1.9,18.6-3.2c23.9-5,49.1-12.4,72.4-1.3c1.2,0.6,6.7-0.4,4.6-1.6
c-16.1-9.9-35.3-9.8-53.3-6.8c-11.2,1.8-22.1,4.9-33.2,7.3c-5.4,1.1-10.9,2.2-16.4,2.5c-5,0.3-12-6.3-6.4-10.6
c-1.7-0.3-3.4-0.6-5.1-1c-3.9,5.4-10.4,8.4-16.9,5.9C9.4,15.3,4.4,16.4,7,17.4L7,17.4z"/>
</g>
</g>
</svg>
</span></a></li>
</div>
<div id="tab-1">
I'm the first
</div>
<div id="tab-2">
I'm number 2
</div>
<div id="tab-3">
I'm the last one.
</div>
</ul>
答案 0 :(得分：-1)
只需根据选项卡是否具有display类来更改.active属性，就像这样：
<style>
#my-tab ul.tabs li a svg {
display: none;
}
#my-tab ul.tabs li a.active svg {
display: block;
height: auto;
}
</style>