БЛОГ НА HUSL


Атрибут width SVG в css при анимации не работает в firefox

Автор вопроса: Alexandr_TT

Атрибут ширины SVG в css-анимации не работает в Firefox, но в Chrome работает отлично. Пожалуйста, проверьте приведенный ниже фрагмент кода.

Что-то не так с моим кодам? Есть ли способ применить анимацию по ширине атрибута?

svg {
  display: inline-block;
}


@-moz-keyframes glareAnim1 {
  0% {
    width: 0;
  }
  50% {
    width: 10px;
  }
  100% {
    width: 0;
  }
}
@-webkit-keyframes glareAnim1 {
  0% {
    width: 0;
  }
  50% {
    width: 10px;
  }
  100% {
    width: 0;
  }
}
@keyframes glareAnim1 {
  0% {
    width: 0;
  }
  50% {
    width: 10px;
  }
  100% {
    width: 0;
  }
}
.glare-top {
  -moz-animation: glareAnim1 2s linear infinite;
  -webkit-animation: glareAnim1 2s linear infinite;
  animation: glareAnim1 2s linear infinite;
}

@-moz-keyframes glareAnim2 {
  0% {
    width: 10px;
  }
  50% {
    width: 0;
  }
  100% {
    width: 10px;
  }
}
@-webkit-keyframes glareAnim2 {
  0% {
    width: 10px;
  }
  50% {
    width: 0;
  }
  100% {
    width: 10px;
  }
}
@keyframes glareAnim2 {
  0% {
    width: 10px;
  }
  50% {
    width: 0;
  }
  100% {
    width: 10px;
  }
}
.glare-bottom {
  -moz-animation: glareAnim2 2s linear infinite;
  -webkit-animation: glareAnim2 2s linear infinite;
  animation: glareAnim2 2s linear infinite;
}

@-moz-keyframes translateDoor {
  0% {
    -moz-transform: translate(-1px, 0);
    transform: translate(-1px, 0);
    opacity: 1;
    width: 1px;
    height: 6px;
  }
  15% {
    width: 4px;
  }
  50% {
    -moz-transform: translate(16px, 0);
    transform: translate(16px, 0);
    opacity: 1;
    width: 2px;
  }
  51% {
    opacity: 0;
  }
  100% {
    -moz-transform: translateX(-10px);
    transform: translateX(-10px);
    opacity: 0;
  }
}
@-webkit-keyframes translateDoor {
  0% {
    -webkit-transform: translate(-1px, 0);
    transform: translate(-1px, 0);
    opacity: 1;
    width: 1px;
    height: 6px;
  }
  15% {
    width: 4px;
  }
  50% {
    -webkit-transform: translate(16px, 0);
    transform: translate(16px, 0);
    opacity: 1;
    width: 2px;
  }
  51% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
    opacity: 0;
  }
}
@keyframes translateDoor {
  0% {
    -moz-transform: translate(-1px, 0);
    -ms-transform: translate(-1px, 0);
    -webkit-transform: translate(-1px, 0);
    transform: translate(-1px, 0);
    opacity: 1;
    width: 1px;
    height: 6px;
  }
  15% {
    width: 4px;
  }
  50% {
    -moz-transform: translate(16px, 0);
    -ms-transform: translate(16px, 0);
    -webkit-transform: translate(16px, 0);
    transform: translate(16px, 0);
    opacity: 1;
    width: 2px;
  }
  51% {
    opacity: 0;
  }
  100% {
    -moz-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
    opacity: 0;
  }
}
.researchDoor {
  fill: #464949;
  -moz-animation: translateDoor 5s linear infinite;
  -webkit-animation: translateDoor 5s linear infinite;
  animation: translateDoor 5s linear infinite;
}

.research0 {
  fill: #FFFFFF;
  stroke: #464949;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.research1 {
  fill: #FCBD38;
  overflow: hidden;
}

.research2 {
  fill: #464949;
}

.research3 {
  fill: none;
  stroke: #464949;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-miterlimit: 10;
}
<svg version="1.1" x="0px" y="0px" viewBox="0 0 100 120" style="enable-background:new 0 0 100 120;" xml:space="preserve">

  <path id="XMLID_42_" class="research0" d="M57.9,25.5c-3-6.4-8.3-11.6-8.3-11.6c-5.1,5-8.3,11.5-8.3,11.5v5.8L57.7,32L57.9,25.5z" />
  <g id="XMLID_40_">
    <rect x="41.4" y="25.9" class="research1" width="16.3" height="11.5" />
    <path class="research2" d="M56.7,26.9v9.5H42.4v-9.5H56.7 M58.7,24.9H40.4v13.5h18.3V24.9L58.7,24.9z" />
  </g>
  <polygon id="XMLID_43_" class="research3" points="33.5,85.2 40.8,37.7 58.8,37.7 66.2,85.2     " />
  <!--  door    -->
  <rect x="41" y="28.9" class="researchDoor" />
  <!--   left top wind  -->
  <rect x="30" class="glare-top" y="28" fill="#464949" width="14" height="2" />
  <!--   left bottom wind    -->
  <rect x="30" class="glare-bottom" y="32" fill="#464949" width="14" height="2" />
  <!--   right top wind  -->
  <rect x="62" y="28" class="glare-top" fill="#464949" width="14" height="2" />
  <!--   right bottom wind    -->
  <rect x="62" y="32" class="glare-bottom" fill="#464949" width="14" height="2" />
  <!--   
  <line id="glareLeftTop" class="research3" x1="36.6" y1="28.7" x2="32.8" y2="28.7"/>
  <line id="glareLeftBottom" class="research3" x1="36.6" y1="33.3" x2="23.8" y2="33.3"/> 
  <line id="glareTopRight" class="research3" x1="62.9" y1="28.7" x2="66.6" y2="28.7"/>
  <line id="glareTopBottom" class="research3" x1="62.9" y1="33.3" x2="75.6" y2="33.3"/>
  -->
  <line id="XMLID_2_" class="research3" x1="76.3" y1="85.3" x2="23.7" y2="85.3" />
  <line id="XMLID_64_" class="research3" x1="60.7" y1="37.7" x2="38.8" y2="37.7" />
  <line id="XMLID_70_" class="research3" x1="58.7" y1="44.3" x2="40.8" y2="44.3" />
  <line id="XMLID_79_" class="research3" x1="60.2" y1="51.7" x2="39.3" y2="51.7" />
  <line id="XMLID_80_" class="research3" x1="61.7" y1="61" x2="37.8" y2="61" />
  <line id="XMLID_90_" class="research3" x1="63.5" y1="69.3" x2="36.8" y2="69.3" />
  <g id="XMLID_49_">
    <path class="research2" d="M49.8,76.2c1.5,0,2.8,1.2,2.8,2.8v5.2H47v-5.2C47,77.4,48.2,76.2,49.8,76.2 M49.8,74.2
            c-2.6,0-4.8,2.1-4.8,4.8v7.2h9.5v-7.2C54.5,76.3,52.4,74.2,49.8,74.2L49.8,74.2z" />
  </g>
</svg>

Свободный перевод вопроса SVG width attribute css animation in firefox от участника @Krish.


Источник

Ответы (2 шт):

Автор решения: Alexandr_TT

В SVG 1.1 width является атрибутом и не может быть анимирована с помощью CSS-анимации.

В предстоящей незавершенной спецификации SVG 2 width - это свойство CSS, которое, следовательно, может быть анимировано с помощью анимации CSS.

Chrome реализовал эту часть спецификации SVG 2, Firefox - нет (хотя он реализовал другие части спецификации, некоторые из которых отсутствуют в Chrome).

Вы можете использовать SMIL для анимации ширины, которая будет работать в Firefox (and in Chrome via a polyfill)).

Свободный перевод ответа от участника @Robert Longson.

→ Ссылка
Автор решения: Alexandr_TT

Рассмотрите возможность использования линий с stroke-width, равной высоте прямоугольников, вместо прямоугольников в вашей анимации.

Для анимации будет использоваться изменение атрибута stroke-dasharray для линий

  • При 0% {stroke-dasharray:0,10;} для анимированной линии равной 10px - линия будет скрыта

  • При 50% {stroke-dasharray:10,0;} линия будет показана полностью

  • При 100%{stroke-dasharray:0,10;} линия будет вновь скрыта

Ниже фрагмент анимации линий:

.glare-top {
  -webkit-animation: glareAnim1 2s linear infinite;
  stroke-dasharray:0,10;
  animation: glareAnim1 2s linear infinite;
}

@-webkit-keyframes glareAnim1 {
  0% {stroke-dasharray:0,10;}
  50% {stroke-dasharray:10,10;}
  100%{stroke-dasharray:0,10;}
}
.glare-bottom {
   -webkit-animation: glareAnim2 2s linear infinite;
  stroke-dasharray:0,10;
  animation: glareAnim2 2s linear infinite;
}
@-webkit-keyframes glareAnim2 {
  0% {stroke-dasharray:10,0;}
  50% {stroke-dasharray:0,10;}
  100%{stroke-dasharray:10,0;}
}
<svg version="1.1"  viewBox="0 0 100 120" >
<!--   left top wind  -->
      <polyline class="glare-top" points="27,28 37,28" stroke="#464949"  stroke-width="2" /> 
 <!--   left bottom wind    -->
      <polyline class="glare-bottom" points="27,33 37,33" stroke="#464949"  stroke-width="2" /> 
  </svg>

Я сократил ваш код, что бы показать основную анимацию линий и двери

svg {
  display: inline-block;
}
.glare-top {
  -webkit-animation: glareAnim1 2s linear infinite;
  stroke-dasharray:0,10;
  animation: glareAnim1 2s linear infinite;
}

@-webkit-keyframes glareAnim1 {
  0% {stroke-dasharray:0,10;}
  50% {stroke-dasharray:10,10;}
  100%{stroke-dasharray:0,10;}
}
@keyframes glareAnim1 {
  0% {stroke-dasharray:0,10;}
  50% {stroke-dasharray:10,10;}
  100%{stroke-dasharray:0,10;}
}

.glare-bottom {
  -moz-animation: glareAnim2 2s linear infinite;
  -webkit-animation: glareAnim2 2s linear infinite;
  stroke-dasharray:0,10;
  animation: glareAnim2 2s linear infinite;
}
@-webkit-keyframes glareAnim2 {
  0% {stroke-dasharray:10,0;}
  50% {stroke-dasharray:0,10;}
  100%{stroke-dasharray:10,0;}
}
@keyframes glareAnim2 {
 0% {stroke-dasharray:10,0;}
  50% {stroke-dasharray:0,10;}
  100%{stroke-dasharray:10,0;}
}

.researchDoor {
  fill: #464949;
  stroke-dasharray:0,6;
   animation: translateDoor 5s linear infinite;
}

@keyframes translateDoor {
  0% {
    transform: translate(-1px, 0);
    opacity: 1;
    stroke-dasharray:0,6;
  }
  15% {
   stroke-dasharray:1.4,4.6;
  }
  50% {
    transform: translate(8px, 0); 
     stroke-dasharray:5,1;
    
  }
   70% {
    transform: translate(12.8px, 0); 
     stroke-dasharray:3.5,2.5;
    
  }
    
  100% {
        
    transform: translateX(16px);
    stroke-dasharray:0,6;
      }
}


.research0 {
  fill: #FFFFFF;
  stroke: #464949;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.research1 {
  fill: #FCBD38;
  overflow: hidden;
}

.research2 {
  fill: #464949;
}

.research3 {
  fill: none;
  stroke: #464949;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-miterlimit: 10;
}
<svg version="1.1"  viewBox="0 0 100 120" >

  <path id="XMLID_42_" class="research0" d="M57.9,25.5c-3-6.4-8.3-11.6-8.3-11.6c-5.1,5-8.3,11.5-8.3,11.5v5.8L57.7,32L57.9,25.5z" />
  <g id="XMLID_40_">
    <rect x="41.4" y="25.9" class="research1" width="16.3" height="11.5"  />
    <path class="research2"  d="M56.7,26.9v9.5H42.4v-9.5H56.7 M58.7,24.9H40.4v13.5h18.3V24.9L58.7,24.9z" />
  </g>
  <polygon id="XMLID_43_" class="research3"  points="33.5,85.2 40.8,37.7 58.8,37.7 66.2,85.2    " />
  <!--  door    -->
   <!-- <rect x="41" y="28.9" class="researchDoor" />  -->
    <polyline class="researchDoor" points="41,32 47,32" stroke="#464949"  stroke-width="6" /> 
  <!--   left top wind  -->
      <polyline class="glare-top" points="27,28 37,28" stroke="#464949"  stroke-width="2" /> 
  <!--   right top wind  -->
   <polyline class="glare-top" points="  62,28 72,28" stroke="#464949"  stroke-width="2" />

 <!--   left bottom wind    -->
      <polyline class="glare-bottom" points="27,33 37,33" stroke="#464949"  stroke-width="2" /> 
 
 <!--   right bottom wind    -->
      <polyline class="glare-bottom" points="  62,33 72,33" stroke="#464949"  stroke-width="2" />
  
    
 
  <line id="XMLID_2_" class="research3" x1="76.3" y1="85.3" x2="23.7" y2="85.3" />
  <line id="XMLID_64_" class="research3" x1="60.7" y1="37.7" x2="38.8" y2="37.7" />
  <line id="XMLID_70_" class="research3" x1="58.7" y1="44.3" x2="40.8" y2="44.3" />
  <line id="XMLID_79_" class="research3" x1="60.2" y1="51.7" x2="39.3" y2="51.7" />
  <line id="XMLID_80_" class="research3" x1="61.7" y1="61" x2="37.8" y2="61" />
  <line id="XMLID_90_" class="research3" x1="63.5" y1="69.3" x2="36.8" y2="69.3" />
  <g id="XMLID_49_">
    <path class="research2" d="M49.8,76.2c1.5,0,2.8,1.2,2.8,2.8v5.2H47v-5.2C47,77.4,48.2,76.2,49.8,76.2 M49.8,74.2
            c-2.6,0-4.8,2.1-4.8,4.8v7.2h9.5v-7.2C54.5,76.3,52.4,74.2,49.8,74.2L49.8,74.2z" />
  </g>
</svg>

Свободный перевод ответа от участника @Alexandr_TT.

→ Ссылка

licensed under cc by-sa 3.0 with attribution.