当前，我正在使用CSS SVG动画，该动画在chrome中可以正常工作，但在边缘浏览器中则无法工作。随附以下代码。这是stackblitz
中的实时示例动画详细信息
从右向左填充左箭头中的绿色。
从左到右填充右箭头中的蓝色。
SVG代码：
<svg width="576px" height="360px" viewBox="0 0 576 360" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Artboard</title>
<desc>Created with Sketch.</desc>
<g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group" transform="translate(0.000000, 185.000000)" fill="#7DBE40">
<rect id="Rectangle" x="0" y="0" width="10" height="10"></rect>
<rect id="Rectangle-Copy-8" x="0" y="13" width="10" height="10"></rect>
<rect id="Rectangle-Copy" x="12" y="0" width="10" height="10"></rect>
<rect id="Rectangle-Copy-9" x="12" y="13" width="10" height="10"></rect>
<rect id="Rectangle-Copy-2" x="25" y="0" width="10" height="10"></rect>
<rect id="Rectangle-Copy-10" x="25" y="13" width="10" height="10"></rect>
<rect id="Rectangle-Copy-3" x="37" y="0" width="10" height="10"></rect>
<rect id="Rectangle-Copy-11" x="37" y="13" width="10" height="10"></rect>
<rect id="Rectangle-Copy-4" x="50" y="0" width="10" height="10"></rect>
<rect id="Rectangle-Copy-12" x="50" y="13" width="10" height="10"></rect>
<rect id="Rectangle-Copy-5" x="62" y="0" width="10" height="10"></rect>
<rect id="Rectangle-Copy-13" x="62" y="13" width="10" height="10"></rect>
<rect id="Rectangle-Copy-6" x="75" y="0" width="10" height="10"></rect>
<rect id="Rectangle-Copy-14" x="75" y="13" width="10" height="10"></rect>
<rect id="Rectangle-Copy-7" x="87" y="0" width="10" height="10"></rect>
<rect id="Rectangle-Copy-15" x="87" y="13" width="10" height="10"></rect>
<rect id="Rectangle-Copy-23" x="0" y="26" width="10" height="10"></rect>
<rect id="Rectangle-Copy-22" x="12" y="26" width="10" height="10"></rect>
<rect id="Rectangle-Copy-21" x="25" y="26" width="10" height="10"></rect>
<rect id="Rectangle-Copy-20" x="37" y="26" width="10" height="10"></rect>
<rect id="Rectangle-Copy-19" x="50" y="26" width="10" height="10"></rect>
<rect id="Rectangle-Copy-18" x="62" y="26" width="10" height="10"></rect>
<rect id="Rectangle-Copy-17" x="75" y="26" width="10" height="10"></rect>
<rect id="Rectangle-Copy-16" x="87" y="26" width="10" height="10"></rect>
<rect id="Rectangle-Copy-31" x="0" y="39" width="10" height="10"></rect>
<rect id="Rectangle-Copy-30" x="12" y="39" width="10" height="10"></rect>
<rect id="Rectangle-Copy-29" x="25" y="39" width="10" height="10"></rect>
<rect id="Rectangle-Copy-28" x="37" y="39" width="10" height="10"></rect>
<rect id="Rectangle-Copy-27" x="50" y="39" width="10" height="10"></rect>
<rect id="Rectangle-Copy-26" x="62" y="39" width="10" height="10"></rect>
<rect id="Rectangle-Copy-25" x="75" y="39" width="10" height="10"></rect>
<rect id="Rectangle-Copy-24" x="87" y="39" width="10" height="10"></rect>
<rect id="Rectangle-Copy-39" x="0" y="52" width="10" height="10"></rect>
<rect id="Rectangle-Copy-38" x="12" y="52" width="10" height="10"></rect>
<rect id="Rectangle-Copy-37" x="25" y="52" width="10" height="10"></rect>
<rect id="Rectangle-Copy-36" x="37" y="52" width="10" height="10"></rect>
<rect id="Rectangle-Copy-35" x="50" y="52" width="10" height="10"></rect>
<rect id="Rectangle-Copy-34" x="62" y="52" width="10" height="10"></rect>
<rect id="Rectangle-Copy-33" x="75" y="52" width="10" height="10"></rect>
<rect id="Rectangle-Copy-32" x="87" y="52" width="10" height="10"></rect>
<rect id="Rectangle-Copy-47" x="0" y="65" width="10" height="10"></rect>
<rect id="Rectangle-Copy-46" x="12" y="65" width="10" height="10"></rect>
<rect id="Rectangle-Copy-45" x="25" y="65" width="10" height="10"></rect>
<rect id="Rectangle-Copy-44" x="37" y="65" width="10" height="10"></rect>
<rect id="Rectangle-Copy-43" x="50" y="65" width="10" height="10"></rect>
<rect id="Rectangle-Copy-42" x="62" y="65" width="10" height="10"></rect>
<rect id="Rectangle-Copy-41" x="75" y="65" width="10" height="10"></rect>
<rect id="Rectangle-Copy-40" x="87" y="65" width="10" height="10"></rect>
<rect id="Rectangle-Copy-55" x="0" y="78" width="10" height="10"></rect>
<rect id="Rectangle-Copy-54" x="12" y="78" width="10" height="10"></rect>
<rect id="Rectangle-Copy-53" x="25" y="78" width="10" height="10"></rect>
<rect id="Rectangle-Copy-52" x="37" y="78" width="10" height="10"></rect>
<rect id="Rectangle-Copy-51" x="50" y="78" width="10" height="10"></rect>
<rect id="Rectangle-Copy-50" x="62" y="78" width="10" height="10"></rect>
<rect id="Rectangle-Copy-49" x="75" y="78" width="10" height="10"></rect>
<rect id="Rectangle-Copy-48" x="87" y="78" width="10" height="10"></rect>
<rect id="Rectangle-Copy-63" x="0" y="91" width="10" height="10"></rect>
<rect id="Rectangle-Copy-62" x="12" y="91" width="10" height="10"></rect>
<rect id="Rectangle-Copy-61" x="25" y="91" width="10" height="10"></rect>
<rect id="Rectangle-Copy-60" x="37" y="91" width="10" height="10"></rect>
<rect id="Rectangle-Copy-59" x="50" y="91" width="10" height="10"></rect>
<rect id="Rectangle-Copy-58" x="62" y="91" width="10" height="10"></rect>
<rect id="Rectangle-Copy-57" x="75" y="91" width="10" height="10"></rect>
<rect id="Rectangle-Copy-56" x="87" y="91" width="10" height="10"></rect>
</g>
<g id="Group-2" transform="translate(479.000000, 185.000000)" fill="#007CB8">
<rect id="Rectangle" x="0" y="0" width="47" height="48"></rect>
<rect id="Rectangle-Copy-65" x="0" y="51" width="47" height="48"></rect>
<rect id="Rectangle-Copy-64" x="50" y="0" width="47" height="48"></rect>
<rect id="Rectangle-Copy-66" x="50" y="51" width="47" height="48"></rect>
</g>
<g id="Group-3" transform="translate(215.000000, 9.000000)">
<rect id="Rectangle" fill="#007BBC" x="0" y="0" width="148" height="10"></rect>
<rect id="Rectangle-Copy-67" fill="#007BBC" x="0" y="15" width="148" height="10"></rect>
<rect id="Rectangle-Copy-68" fill="#007BBC" x="0" y="30" width="148" height="10"></rect>
<rect id="Rectangle-Copy-69" fill="#007BBC" x="0" y="44" width="148" height="10"></rect>
<rect id="Rectangle-Copy-70" fill="#007BBC" x="0" y="59" width="148" height="10"></rect>
<rect id="Rectangle-Copy-71" fill="#7BC043" x="0" y="74" width="148" height="10"></rect>
<rect id="Rectangle-Copy-72" fill="#7BC043" x="0" y="89" width="148" height="10"></rect>
<rect id="Rectangle-Copy-73" fill="#7BC043" x="0" y="104" width="148" height="10"></rect>
<rect id="Rectangle-Copy-74" fill="#7BC043" x="0" y="118" width="148" height="10"></rect>
<rect id="Rectangle-Copy-75" fill="#007BBC" x="0" y="133" width="148" height="10"></rect>
<rect id="Rectangle-Copy-76" fill="#007BBC" x="0" y="148" width="148" height="10"></rect>
<rect id="Rectangle-Copy-77" fill="#007BBC" x="0" y="163" width="148" height="10"></rect>
<rect id="Rectangle-Copy-78" fill="#007BBC" x="0" y="178" width="148" height="10"></rect>
<rect id="Rectangle-Copy-79" fill="#007BBC" x="0" y="192" width="148" height="10"></rect>
<rect id="Rectangle-Copy-80" fill="#007BBC" x="0" y="207" width="148" height="10"></rect>
<rect id="Rectangle-Copy-81" fill="#007BBC" x="0" y="222" width="148" height="10"></rect>
</g>
<path d="M204,0 L375,0 L375,250 L204,250 L204,0 Z M209,5 L209,245 L370,245 L370,5 L209,5 Z" id="Rectangle" fill="#000000" fill-rule="nonzero"></path>
<rect id="Rectangle" stroke="#9AC270" stroke-width="2" x="199" y="80" width="179" height="60"></rect>
<defs>
<clipPath id="left-top-line">
<rect x="48" y="108" height="2" width="150" style="transform:translateX(-100) rotate(180)">
</rect>
</clipPath>
<clipPath id="left-vertical-line">
<rect x="46" y="108" height="65" width="2"
style="transform:translateX(-100) rotate(180)">
</rect>
</clipPath>
<clipPath id="left-arrow">
<rect x= "37" height="10" y="165" width="20" fill="green" style="transform:translateX(-100) rotate(180)">
<!-- left arrow -->
</rect>
</clipPath>
<clipPath id="right-top-line">
<rect x="375" y="65" height="2" width="150" fill="green" style="transform:translateX(-100) rotate(180)" >
<!-- right top line -->
</rect>
</clipPath>
<clipPath id="right-vertical-line">
<rect x="524" y="65" height="82" width="2" style="transform:translateX(-100) rotate(180)" >
<!-- right vertical line -->
</rect>
</clipPath>
<clipPath id="right-bottom-line">
<rect x="375" y="162" height="2" width="139" fill="green" style="transform:translateX(-100) rotate(180)" >
<!-- right bottom line -->
</rect>
</clipPath>
<clipPath id="right-bottom-arrow">
<rect x= "505" height="21" y="152" width="20" fill="green" style="transform:translateX(-100) rotate(180)" >
<!-- right bottom arrow -->
</rect>
</clipPath>
<clipPath id="right-top-arrow">
<rect x= "514" height="20" y="140" width="20" fill="green" style="transform:translateX(-100) rotate(180)" >
<!-- right top arrow -->
</rect>
</clipPath>
</defs>
<polygon id="Path" fill="#979797" fill-rule="nonzero" points="48 109.990893 198 109.990893 198 108 46 108 46 172 48 172"></polygon>
<polygon class="fill fill1 polygon-left-top-line" clip-path="url(#left-top-line)" fill="#7BC043" fill-rule="nonzero" points="48 109.990893 198 109.990893 198 108 46 108 46 172 48 172"></polygon>
<polygon class="fill fill2" clip-path="url(#left-vertical-line)" fill="#7BC043" fill-rule="nonzero" points="48 109.990893 198 109.990893 198 108 46 108 46 172 48 172"></polygon>
<polygon id="Path-2" fill="#979797" fill-rule="nonzero" points="38.9828151 167.008053 38 168.673053 47.3205292 174 57 168.681106 56.0459208 167 47.3395584 171.784169"></polygon>
<polygon class="fill fill3" clip-path="url(#left-arrow)" fill="#7BC043" fill-rule="nonzero" points="38.9828151 167.008053 38 168.673053 47.3205292 174 57 168.681106 56.0459208 167 47.3395584 171.784169"></polygon>
<polygon id="Path-3" fill="#979797" fill-rule="nonzero" points="523.998129 66.9904511 523.998129 145 526 145 526 65 375 65 375 66.9904511"></polygon>
<polygon class="fill fill1" clip-path="url(#right-top-line)" fill="#007CB8" fill-rule="nonzero" points="523.998129 66.9904511 523.998129 145 526 145 526 65 375 65 375 66.9904511"></polygon>
<polygon class="fill fill2" clip-path="url(#right-vertical-line)" fill="#007CB8" fill-rule="nonzero" points="523.998129 66.9904511 523.998129 145 526 145 526 65 375 65 375 66.9904511"></polygon>
<path id="Path-4" fill="#979797" fill-rule="nonzero" d="M523.998109,145.862687 L525.037303,145.861627 L524.5174,145.523008 L523.998109,145.862687 Z M516.037569,140 L515,141.799755 L524.519637,148 L534,141.798694 L532.959182,140.00106 L524.5174,145.523008 L516.037569,140 Z"></path>
<path class="fill fill3" clip-path="url(#right-top-arrow)" fill="#007CB8" fill-rule="nonzero" d="M523.998109,145.862687 L525.037303,145.861627 L524.5174,145.523008 L523.998109,145.862687 Z M516.037569,140 L515,141.799755 L524.519637,148 L534,141.798694 L532.959182,140.00106 L524.5174,145.523008 L516.037569,140 Z"></path>
<polygon id="Path-5" fill="#979797" fill-rule="nonzero" points="375 164 513 164 513 162 375 162"></polygon>
<polygon class="fill fill1" clip-path="url(#right-bottom-line)" fill="#007CB8" fill-rule="nonzero" points="375 164 513 164 513 162 375 162"></polygon>
<polygon id="Path-6" fill="#979797" fill-rule="nonzero" points="506 171.825952 507.606517 173 515 162.992649 507.606087 153 506.000431 154.175213 512.525427 162.993547"></polygon>
<polygon class="fill fill2" clip-path="url(#right-bottom-arrow)" fill="#007CB8" fill-rule="nonzero" points="506 171.825952 507.606517 173 515 162.992649 507.606087 153 506.000431 154.175213 512.525427 162.993547"></polygon>
<polygon id="Path-7" fill="#000000" fill-rule="nonzero" points="86.2283993 330.017645 51.9141509 311 49 316.229072 84.6734246 336 500.143621 336 531 316.127251 527.745447 311.101821 498.374882 330.017645"></polygon>
<polygon id="Path-8" fill="#000000" fill-rule="nonzero" points="287 343 287 360 292 360 292 343"></polygon>
<polygon id="Path-8" fill="#000000" fill-rule="nonzero" transform="translate(289.500000, 351.500000) rotate(90.000000) translate(-289.500000, -351.500000) " points="287 343 287 360 292 360 292 343"></polygon>
</g>
</svg>
CSS代码：
#left-top-line rect {
animation: pavan 3s ease;
}
#left-vertical-line rect, #right-top-line rect, #right-vertical-line rect, #right-bottom-line rect, #right-bottom-arrow rect, #right-top-arrow rect {
animation: pavan1 3s ease;
}
@keyframes pavan {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes pavan1 {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
答案 0 :(得分：1)
这是代码的简化版本。我只在做一支箭。
我正在使用您的路径作为箭头的剪切路径。
<defs>
<clipPath id="clip">
<polygon id="poly" points="48,109.990893 198, 109.990893 198,108 46,108 46,172 48,172"></polygon>
<polygon id="arrow" points="38.9828151 167.008053 38 168.673053 47.3205292 174 57 168.681106 56.0459208 167 47.3395584 171.784169"></polygon>
</clipPath>
</defs>
我再次使用这些路径作为灰色基准
<use xlink:href="#poly" fill="#ccc" />
<use xlink:href="#arrow" fill="#ccc" />
我正在使用stroke-dasharray和stroke-dashoffset制作一条非常宽的绿色折线。宽绿色的折线被路径剪切。
svg{border:1px solid; width:100vh;}
polyline{fill:none}
#poly1{stroke-dasharray:219px; stroke-dashoffset:219px;animation: dash 2s 1 forwards;}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}<svg viewBox="0 90 220 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="clip">
<polygon id="poly" points="48,109.990893 198, 109.990893 198,108 46,108 46,172 48,172"></polygon>
<polygon id="arrow" points="38.9828151 167.008053 38 168.673053 47.3205292 174 57 168.681106 56.0459208 167 47.3395584 171.784169"></polygon>
</clipPath>
</defs>
<use xlink:href="#poly" fill="#ccc" />
<use xlink:href="#arrow" fill="#ccc" />
<polyline id="poly1" points="198,108 46,108 46,175" stroke="#7BC043" stroke-width="20" clip-path="url(#clip)"></polyline>
</svg>