Анимация ширины прямоугольника SVG не работает в Firefox - PullRequest
Новая
       15

Анимация ширины прямоугольника SVG не работает в Firefox

0 голосов
/ 14 сентября 2018

Я пытался анимировать ширину SVG-прямоугольника с помощью CSS, и он, кажется, работает с Chrome и Opera, но не работает в Firefox, я был бы признателен за любую помощь в этом, заранее спасибо

https://codepen.io/goprime/pen/BOPBjM

А вот код:

HTML: 

<?xml version="1.0" standalone="no"?>
                    <!-- Generator: Gravit.io --><svg class="responsive-svg" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="908.444 448 948 1114"
                        width="948" height="1114">

                        <!-- This is the main background -->
                        <g>
                            <rect x="908.444" y="448" width="948" height="1114" transform="matrix(1,0,0,1,0,0)" fill="white" />
                            <g transform="matrix(1,0,0,1,1232.227,773.652)">

                                <text transform="matrix(1,0,0,1,0,76.957)" style="font-family:'Source Sans Pro';font-weight:400;font-size:72px;font-style:normal;fill:#A4A598;stroke:none;">INTERIOR</text></g>

                           </g>

                            <!-- First box cover-->
                            <rect class="anim_test_top" x="1130" y="773.652" transform="matrix(1,0,0,1,0,0) rotate(180 1430 820.652)"
                                fill="white" />

 </svg>

CSS: 

.anim_test_top {
  /* stroke:cyan; */
  width: 530px;
  height: 80px;
  animation: anim 2s linear forwards;
}



@keyframes anim {
  from {
    width: 630.214px;
  }

  to {
    width: 0;
  }
}

1 Ответ

0 голосов
/ 14 сентября 2018

Рассматривали ли вы перевести #anim_test_top?Далее, мой код, куда я перевожу #anim_test_top.Также я внес некоторые изменения в ваш SVG, поскольку вы тоже можете трансформироваться.

svg{max-height:100vh;}
#anim_test_top {
  stroke:cyan;
  width: 450px;
  height: 100px;
  transform:translate(0, 0);
  animation: anim 2s linear forwards;
}

text{font-family:'Source Sans Pro';font-weight:400;font-size:72px;font-style:normal;fill:#A4A598;stroke:none;}


@keyframes anim {
  0% {
    transform:translate(0, 0);
  }

  100% {
    transform:translate(450px, 0);
  }
}
<svg class="responsive-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 948 500">

<!-- This is the main background -->
<g>
<rect x="0" y="0" width="948" height="1114" fill="#eee" />
<g>
<text y="200" x="424" id="text"  text-anchor="middle">INTERIOR</text></g>
</g>
<!-- First box cover-->
<rect id="anim_test_top" width="450" height="100" x="200" y="130" fill="rgba(255,255,255,.75)" >
</rect>
</svg>

Надеюсь, это поможет

ОБНОВЛЕНИЕ:

если перевод невозможен, вы можете масштабировать прямоугольник: 

svg{max-height:100vh;}
#anim_test_top {
  stroke:cyan;
  width: 450px;
  height: 100px;
  transform-origin: top right;
  transform:scale(1, 1);
  animation: anim 2s linear forwards;
}

text{font-family:'Source Sans Pro';font-weight:400;font-size:72px;font-style:normal;fill:#A4A598;stroke:none;}


@keyframes anim {
  0% {
    transform:scale(1, 1);
  }

  100% {
    transform:scale(0, 1);
  }
}
<svg class="responsive-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 948 500">

<!-- This is the main background -->
<g>
<rect x="0" y="0" width="948" height="1114" fill="#eee" />
<g>
<text y="200" x="424" id="text"  text-anchor="middle">INTERIOR</text></g>
</g>
<!-- First box cover-->
<rect id="anim_test_top" width="450" height="100" x="200" y="130" fill="rgba(255,255,255,.75)" >
</rect>
</svg>
...