Непрозрачность CSS не применяется в chrome, но применяется в firefox - PullRequest
Новая
       86

Непрозрачность CSS не применяется в chrome, но применяется в firefox

1 голос
/ 14 марта 2020

Я пытаюсь сгенерировать CSS анимированный SVG. Ниже приведен мой код 

.body {
  animation: a1 3s 1s linear forwards;
  transform-origin: center bottom;
  stroke: rgb(192, 31, 31);
  fill: #FD625E;
  transform: scaleY(0);
  stroke-width: 2px;
}

.head {
  stroke: rgb(192, 31, 31);
  animation: a2 4s linear forwards;
}

.logo1 {
  opacity: 0;
  animation: a3 1s 4s linear forwards, a4 4s 5.5s infinite cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes a1 {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes a2 {
  0% {
    fill: white;
  }
  95% {
    fill: white;
  }
  100% {
    fill: #374649;
  }
}

@keyframes a3 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes a4 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-560px);
    opacity: 0;
  }
}
<svg id="background" xmlns="http://www.w3.org/2000/svg" width="1008.86" height="714.62" viewBox="0 0 1008.86 714.62">
    <g id="body">
    <rect class="body" x="294.99" y="639.57" width="56.85" height="74.55" fill="#fff"/>
    <path d="M536.85,641.07v73.55H481V641.07h55.85m1-1H480v75.55h57.85V640.07Z" transform="translate(-185.51 -1)"/>
  </g>

  <g id="head">
    <rect class="head" x="309.05" y="628.88" width="28.73" height="9.03" fill="#fff"/>
    <path d="M522.79,630.37v8H495.06v-8h27.73m1-1H494.06v10h29.73v-10Z" transform="translate(-185.51 -1)"/>
 </g>


  <g class="logo1" id="logo3" stroke="#000">
    <path d="M500.73,622.57h0A1.22,1.22,0,0,1,502,623.7v3.78a1.22,1.22,0,0,1-1.29,1.14h0a1.23,1.23,0,0,1-1.3-1.14V623.7A1.22,1.22,0,0,1,500.73,622.57Z" transform="translate(-185.51 -1)" fill="#212121"/>
    <path d="M505.05,618h0a1.22,1.22,0,0,1,1.29,1.13v8.32a1.22,1.22,0,0,1-1.29,1.14h0a1.23,1.23,0,0,1-1.3-1.14v-8.32A1.22,1.22,0,0,1,505.05,618Z" transform="translate(-185.51 -1)" fill="#212121"/>
    <path d="M509.37,620.3h0a1.22,1.22,0,0,1,1.29,1.13v6.05a1.22,1.22,0,0,1-1.29,1.14h0a1.23,1.23,0,0,1-1.3-1.14v-6.05A1.22,1.22,0,0,1,509.37,620.3Z" transform="translate(-185.51 -1)" fill="#212121"/>
    <path d="M513.69,615h0a1.22,1.22,0,0,1,1.29,1.13v11.35a1.22,1.22,0,0,1-1.29,1.14h0a1.23,1.23,0,0,1-1.3-1.14V616.13A1.23,1.23,0,0,1,513.69,615Z" transform="translate(-185.51 -1)" fill="#212121"/>
    <path d="M500.73,622.57h0A1.22,1.22,0,0,1,502,623.7v3.78a1.22,1.22,0,0,1-1.29,1.14h0a1.23,1.23,0,0,1-1.3-1.14V623.7A1.22,1.22,0,0,1,500.73,622.57Z" transform="translate(-185.51 -1)" fill="#212121"/>
    <path d="M505.05,618h0a1.22,1.22,0,0,1,1.29,1.13v8.32a1.22,1.22,0,0,1-1.29,1.14h0a1.23,1.23,0,0,1-1.3-1.14v-8.32A1.22,1.22,0,0,1,505.05,618Z" transform="translate(-185.51 -1)" fill="#212121"/>
    <path d="M509.37,620.3h0a1.22,1.22,0,0,1,1.29,1.13v6.05a1.22,1.22,0,0,1-1.29,1.14h0a1.23,1.23,0,0,1-1.3-1.14v-6.05A1.22,1.22,0,0,1,509.37,620.3Z" transform="translate(-185.51 -1)" fill="#212121"/>
    <path d="M513.69,615h0a1.22,1.22,0,0,1,1.29,1.13v11.35a1.22,1.22,0,0,1-1.29,1.14h0a1.23,1.23,0,0,1-1.3-1.14V616.13A1.23,1.23,0,0,1,513.69,615Z" transform="translate(-185.51 -1)" fill="#212121"/>
  </g>

</svg>

Когда я открываю его в Mozilla, он ведет себя иначе, чем Chrome. Mozilla применяет все ключевые кадры, как и положено, тогда как Chrome не применяет непрозрачность ключевого кадра a3 к 1 при 100%. Я провел много исследований, но не могу это исправить. Мне нужно это сделать в chrome, как это делается в Mozilla.

Может кто-нибудь помочь, пожалуйста.

Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 14 марта 2020

Замените ваши ссылки на opacity на fill-opacity , и это работает. Вы также можете использовать штрих-непрозрачность , если вам это тоже нужно.

0 голосов
/ 14 марта 2020

@ MS C огромное спасибо вам за этот ответ. Я целый день чесал голову, чтобы решить эту проблему. Я публикую здесь полный код для целей документации и мою собственную будущую ссылку здесь, как это было решено в chrome согласно вашему предложению.

CSS Часть 

                .body {
                      animation: a1 3s 1s linear forwards;
                      transform-origin: center bottom;
                      stroke: rgb(192, 31, 31);
                      fill: #FD625E;
                      transform: scaleY(0);
                      stroke-width: 2px;
                    }
                    .head {
                      stroke: rgb(192, 31, 31);
                      animation: a2 4s linear forwards;
                      }

                    .logo1 {
                      fill-opacity:0;
                      stroke-opacity:0;
                      animation: a3 1s 4s linear forwards,a31 1s 4s linear forwards,
                     a4 4s 5.5s infinite cubic-bezier(0.250, 0.460, 0.450, 0.940) both; 
                        }

                    @keyframes a1 {
                    0% {
                        transform: scaleY(0);
                      }

                      100% {
                        transform: scaleY(1); 
                      }
                    }
                    @keyframes a2 {
                    0% {
                        fill:white;
                       }
                       95% {
                        fill:white;
                       }
                    100% {
                        fill: #374649;
                       }
                    } 

                    @keyframes a3 {
                    0% {stroke-opacity:0;}
                    100%{stroke-opacity:1;}
                       } 

                   @keyframes a31 {
                    0% {fill-opacity:0;}
                    100%{fill-opacity:1;}
                       }

                    @keyframes a4 {
                    0% {
                        transform: translateY(0);
                       }

                    100% {
                        transform: translateY(-560px); opacity:0;
                       }
                    }

Порция SVG 

                <svg id="background" xmlns="http://www.w3.org/2000/svg" width="1008.86" height="714.62" viewBox="0 0 1008.86 714.62">
                        <g id="body">
                        <rect class="body" x="294.99" y="639.57" width="56.85" height="74.55" fill="#fff"/>
                        <path d="M536.85,641.07v73.55H481V641.07h55.85m1-1H480v75.55h57.85V640.07Z" transform="translate(-185.51 -1)"/>
                      </g>

                      <g id="head">
                        <rect class="head" x="309.05" y="628.88" width="28.73" height="9.03" fill="#fff"/>
                        <path d="M522.79,630.37v8H495.06v-8h27.73m1-1H494.06v10h29.73v-10Z" transform="translate(-185.51 -1)"/>
                     </g>


                      <g class="logo1" id="logo3" stroke="#000" style="stroke-opacity:0">
                        <path d="M500.73,622.57h0A1.22,1.22,0,0,1,502,623.7v3.78a1.22,1.22,0,0,1-1.29,1.14h0a1.23,1.23,0,0,1-1.3-1.14V623.7A1.22,1.22,0,0,1,500.73,622.57Z" transform="translate(-185.51 -1)" fill="#212121"/>
                        <path d="M505.05,618h0a1.22,1.22,0,0,1,1.29,1.13v8.32a1.22,1.22,0,0,1-1.29,1.14h0a1.23,1.23,0,0,1-1.3-1.14v-8.32A1.22,1.22,0,0,1,505.05,618Z" transform="translate(-185.51 -1)" fill="#212121"/>
                        <path d="M509.37,620.3h0a1.22,1.22,0,0,1,1.29,1.13v6.05a1.22,1.22,0,0,1-1.29,1.14h0a1.23,1.23,0,0,1-1.3-1.14v-6.05A1.22,1.22,0,0,1,509.37,620.3Z" transform="translate(-185.51 -1)" fill="#212121"/>
                        <path d="M513.69,615h0a1.22,1.22,0,0,1,1.29,1.13v11.35a1.22,1.22,0,0,1-1.29,1.14h0a1.23,1.23,0,0,1-1.3-1.14V616.13A1.23,1.23,0,0,1,513.69,615Z" transform="translate(-185.51 -1)" fill="#212121"/>
                        <path d="M500.73,622.57h0A1.22,1.22,0,0,1,502,623.7v3.78a1.22,1.22,0,0,1-1.29,1.14h0a1.23,1.23,0,0,1-1.3-1.14V623.7A1.22,1.22,0,0,1,500.73,622.57Z" transform="translate(-185.51 -1)" fill="#212121"/>
                        <path d="M505.05,618h0a1.22,1.22,0,0,1,1.29,1.13v8.32a1.22,1.22,0,0,1-1.29,1.14h0a1.23,1.23,0,0,1-1.3-1.14v-8.32A1.22,1.22,0,0,1,505.05,618Z" transform="translate(-185.51 -1)" fill="#212121"/>
                        <path d="M509.37,620.3h0a1.22,1.22,0,0,1,1.29,1.13v6.05a1.22,1.22,0,0,1-1.29,1.14h0a1.23,1.23,0,0,1-1.3-1.14v-6.05A1.22,1.22,0,0,1,509.37,620.3Z" transform="translate(-185.51 -1)" fill="#212121"/>
                        <path d="M513.69,615h0a1.22,1.22,0,0,1,1.29,1.13v11.35a1.22,1.22,0,0,1-1.29,1.14h0a1.23,1.23,0,0,1-1.3-1.14V616.13A1.23,1.23,0,0,1,513.69,615Z" transform="translate(-185.51 -1)" fill="#212121"/>
                      </g>

                    </svg>
...