CSS SVG анимация не работает в краю - PullRequest
Новая
       59

CSS SVG анимация не работает в краю

0 голосов
/ 26 июня 2019

В настоящее время я использую CSS SVG-анимацию, которая отлично работает в Chrome, но не работает в браузере Edge.Прикрепленный код ниже.Вот живой пример в 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);
  }
}

1 Ответ

1 голос
/ 26 июня 2019

Это упрощенная версия вашего кода.Я делаю только одну стрелу.

Я использую ваши пути в качестве обтравочных контуров для стрелки.

 <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>
...