Question

我的svg互动动画在Mozilla上运行不佳。虽然它在Chrome，Opera，IE上看起来很不错但它完全被破坏了...... 有谁知道原因是什么？

编辑：我已检查过其他类似问题，但我的问题没有解决方案。它与text和tspan有关。

＆＃13;

$(document).ready(function() {
  $('#phase1').click(function() {
    $('.show_phase1').addClass('current');
    $('.show_phase2').removeClass('current');
    $('.show_phase3').removeClass('current');
    $('.show_phase4').removeClass('current');
    $('.show_phase5').removeClass('current');
    $(this).attr("class", "disactive_ph active_ph");
    $('#phase2').attr("class", "");
    $('#phase3').attr("class", "");
    $('#phase4').attr("class", "");
    $('#phase5').attr("class", "");
  })
  $('#phase2').click(function() {
    $('.show_phase2').addClass('current');
    $('.show_phase1').removeClass('current');
    $('.show_phase3').removeClass('current');
    $('.show_phase4').removeClass('current');
    $('.show_phase5').removeClass('current');
    $(this).attr("class", "disactive_ph active_ph");
    $('#phase1').attr("class", "");
    $('#phase3').attr("class", "");
    $('#phase4').attr("class", "");
    $('#phase5').attr("class", "");
  })
  $('#phase3').click(function() {
    $('.show_phase3').addClass('current');
    $('.show_phase1').removeClass('current');
    $('.show_phase2').removeClass('current');
    $('.show_phase4').removeClass('current');
    $('.show_phase5').removeClass('current');
    $(this).attr("class", "disactive_ph active_ph");
    $('#phase1').attr("class", "");
    $('#phase2').attr("class", "");
    $('#phase4').attr("class", "");
    $('#phase5').attr("class", "");
  })
  $('#phase4').click(function() {
    $('.show_phase4').addClass('current');
    $('.show_phase1').removeClass('current');
    $('.show_phase2').removeClass('current');
    $('.show_phase3').removeClass('current');
    $('.show_phase5').removeClass('current');
    $(this).attr("class", "disactive_ph active_ph");
    $('#phase1').attr("class", "");
    $('#phase2').attr("class", "");
    $('#phase3').attr("class", "");
    $('#phase5').attr("class", "");
  })
  $('#phase5').click(function() {
    $('.show_phase5').addClass('current');
    $('.show_phase1').removeClass('current');
    $('.show_phase2').removeClass('current');
    $('.show_phase3').removeClass('current');
    $('.show_phase4').removeClass('current');
    $(this).attr("class", "disactive_ph active_ph");
    $('#phase1').attr("class", "");
    $('#phase2').attr("class", "");
    $('#phase3').attr("class", "");
    $('#phase4').attr("class", "");
  })
})



$(document).ready(function() {
  // Hide the div
  $(".show_phase1").hide();
  // Show the div after 5s
  $(".show_phase1").delay(2000).fadeIn(100);
});

＆＃13;

.arc-animation a {
  color: #28353d;
  font-size: 30px;
  text-transform: capitalize;
  font-weight: 300;
  font-family: 'Maven Pro', sans-serif;
}

.arc-animation p {
  color: #28353d;
  font-size: 18px;
  line-height: 1.5;
  width: 70%;
  text-align: center;
  word-wrap: break-word;
  margin: 0 auto;
  font-weight: 300;
  padding: 25px 0 60px;
}

.arc-animation {
  float: left;
  background: #fafbfb;
  margin: 0;
  padding-bottom: 80px;
}

.arc-animation .btn-link {
  margin: 30px 0 35px;
}

.arc-animation-content {
  float: left;
  margin-top: -17%;
  position: relative;
  z-index: 0;
}

.arc-line {
  animation: arc 2s cubic-bezier(0.82, 0, 0.19, 1);
  -webkit-animation: arc 2s cubic-bezier(0.82, 0, 0.19, 1);
  fill-opacity: 0;
  stroke-width: 3;
  stroke: #eff1f0
}

.arc-animation .icon-txt {
  display: none;
}

@keyframes arc {
  0% {
    stroke-dasharray: 3638;
    stroke-dashoffset: 3638
  }
  100% {
    stroke-dashoffset: 7276;
    stroke-dasharray: 3638
  }
}

#phase1 {
  opacity: 0;
  animation: fadeInOpacity 400ms cubic-bezier(0.82, 0, 0.19, 1) forwards;
  animation-delay: 1s
}

@keyframes fadeInOpacity {
  100% {
    opacity: 1
  }
}

#phase2 {
  opacity: 0;
  animation: fadeInOpacity1 400ms cubic-bezier(0.82, 0, 0.19, 1) forwards;
  animation-delay: 1.2s
}

@keyframes fadeInOpacity1 {
  100% {
    opacity: 1
  }
}

#phase3 {
  opacity: 0;
  animation: fadeInOpacity2 400ms cubic-bezier(0.82, 0, 0.19, 1) forwards;
  animation-delay: 1.4s
}

@keyframes fadeInOpacity2 {
  100% {
    opacity: 1
  }
}

#phase4 {
  opacity: 0;
  animation: fadeInOpacity3 400ms cubic-bezier(0.82, 0, 0.19, 1) forwards;
  animation-delay: 1.8s
}

@keyframes fadeInOpacity3 {
  100% {
    opacity: 1
  }
}

#phase5 {
  opacity: 0;
  animation: fadeInOpacity4 400ms cubic-bezier(0.82, 0, 0.19, 1) forwards;
  animation-delay: 2s
}

@keyframes fadeInOpacity4 {
  100% {
    opacity: 1
  }
}

.arc-animation text {
  font-family: 'Maven Pro', sans-serif;
  font-weight: 300;
}

.show_ph {
  opacity: 0;
  margin: 0 auto;
  text-align: center;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  padding: 0;
  float: left;
  width: 100%;
  height: 0;
  overflow: hidden;
  transform: translateY(20px);
}

.show_ph.current {
  opacity: 1;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
  z-index: 999999;
  display: block!important;
  height: auto!important;
  transform: translateY(0);
}

.show_ph .product-features svg {
  margin: 0 5px;
  height: 50px;
  width: 30px;
  padding: 0;
}

svg#Arc_1_ {
  overflow: visible;
  position: relative;
  z-index: 99;
}

circle.c1 {
  stroke: #eff1f0;
  stroke-width: 10px!important;
}

circle.c2 {
  stroke: #fafbfb;
  stroke-width: 4;
}

.arc-animation .product-img {
  width: 20%;
}

.active_ph path {
  opacity: 0;
}

.active_ph .c1 {
  -webkit-transition: all .4s cubic-bezier(.82, 0, .19, 1);
  -moz-transition: all .4s cubic-bezier(.82, 0, .19, 1);
  transition: all .4s cubic-bezier(.82, 0, .19, 1);
}

rect.c3 {
  fill: rgba(0, 0, 0, 0);
}

#phase1.active_ph .c1 {
  stroke: #8fc85a;
}

#phase2.active_ph .c1 {
  stroke: #F3845D;
}

#phase3.active_ph .c1 {
  stroke: #68C5AD;
}

#phase4.active_ph .c1 {
  stroke: #60A6DB;
}

#phase5.active_ph .c1 {
  stroke: #9674A5;
}

.active_ph text.t1 {
  font-size: 20px;
  -ms-transform: translate(80px, -40px);
  -webkit-transform: translate(80px, -40px);
  transform: translate(80px, -40px);
  fill: #969a9d;
}

.active_ph text.t2 {
  font-size: 40px;
  -ms-transform: translate(80px, 0px);
  -webkit-transform: translate(80px, 0px);
  transform: translate(80px, 0px);
  fill-opacity: 1;
}

text.t1 {
  font-size: 20px;
}

text.t2 {
  font-size: 40px;
  -ms-transform: translate(80px, 20px);
  -webkit-transform: translate(80px, 20px);
  transform: translate(80px, 20px);
  fill-opacity: 0;
}

.disactive_ph {
  cursor: pointer
}

text {
  -webkit-transition: all 400ms cubic-bezier(0.82, 0, 0.19, 1);
  -moz-transition: all 400ms cubic-bezier(0.82, 0, 0.19, 1);
  transition: all 400ms cubic-bezier(0.82, 0, 0.19, 1)
}

.active_ph circle {
  cursor: pointer;
  stroke-width: 4px
}

.show_phase1 a {
  color: #8fc85a;
}

.show_phase2 a {
  color: #F3845D;
}

.show_phase3 a {
  color: #68C5AD;
}

.show_phase4 a {
  color: #60A6DB;
}

.show_phase5 a {
  color: #9674A5;
}

.show_phase1 {
  display: none;
  -webkit-animation: fadein 1800ms ease;
  -moz-animation: fadein 1800ms ease;
  -ms-animation: fadein 1800ms ease;
  -o-animation: fadein 1800ms ease;
  animation: fadein 1800ms ease
}

text.t3 {
  font-size: 20px;
}

@keyframes fadein {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@-moz-keyframes fadein {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@-webkit-keyframes fadein {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@-ms-keyframes fadein {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@-o-keyframes fadein {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@media only screen and (max-width: 1100px) {
  .arc-animation {
    padding: 0 40px;
  }
}

@media only screen and (max-width: 768px) {
  .arc-animation {
    padding: 0 20px;
    margin: 40px 0;
    border-radius: 0;
  }
  text.t2 {
    font-size: 50px;
  }
  .active_ph text.t2 {
    font-size: 50px;
  }
  .active_ph text.t1 {
    -ms-transform: translate(80px, -50px);
    -webkit-transform: translate(80px, -50px);
    transform: translate(80px, -50px);
  }
  .phase-btn:hover .t1 {
    -ms-transform: translate(80px, -50px);
    -webkit-transform: translate(80px, -50px);
    transform: translate(80px, -50px);
  }
  text.t1 {
    font-size: 30px;
  }
  .arc-animation a {
    font-size: 24px;
    margin: 15px 0 20px;
  }
  .arc-animation p {
    width: 100%;
  }
  .show_ph .product-features svg {
    display: none;
  }
  .arc-animation .product-img {
    width: 30%;
  }
}

@media only screen and (max-width: 400px) {
  text.t2 {
    font-size: 70px;
  }
  .active_ph text.t2 {
    font-size: 70px;
  }
  .active_ph text.t1 {
    -ms-transform: translate(80px, -70px);
    -webkit-transform: translate(80px, -70px);
    transform: translate(80px, -70px);
  }
  .phase-btn:hover .t1 {
    -ms-transform: translate(80px, -70px);
    -webkit-transform: translate(80px, -70px);
    transform: translate(80px, -70px);
  }
  text.t1 {
    font-size: 50px;
  }
  .arc-animation .product-img {
    width: 40%;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="arc-animation">
  <header class="main-header">
    <div class="container flex">
      <div class="col-3 left">
        <div class="flex-1">
          <span class="category" style="color: #28353d;">HTML 5 </span>
        </div>
      </div>
    </div>
  </header>
  <div class="col-4 margin">
    <svg class="arc" version="1.1" id="Arc_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1186 311.985" enable-background="new 0 0 1186 311.985" xml:space="preserve">
        <path id="arc" class="arc-line" fill="none" stroke="#F4F4F4" stroke-width="2" stroke-miterlimit="10" d="M1105.296,271.07
          c-70.067-68.721-150.403-120.396-235.953-155.384c-88.668-36.263-182.936-54.283-277.193-54.283h0.146
          c-94.257,0-188.525,18.02-277.193,54.283c-85.55,34.988-165.886,86.746-235.953,155.467"/>
        <g id="phase5" class="phase-x ph5 disactive_ph">
          <g class="phase-btn">
              <circle class="c1" fill="#fff" cx="1104.994" cy="271.403" r="12.5"/>
              <circle class="c2" fill="#9674A5" cx="1104.994" cy="271.403" r="12.5"/>
              <rect class="c3" x="1015" y="175" width="180" height="120"></rect>
              <text class="t1" x="1024" y="240" fill="#9674A5" transform="translate(80)">
                <tspan  text-anchor="middle">Phase 5</tspan>
              </text>

              <text class="t2" x="1024" y="220" transform="translate(80)" fill="#9674A5">
                <tspan text-anchor="middle" dy="15">Immunity</tspan>
              </text>

              <path fill="#FFFFFF" d="M1109.994,270.278h-4v-4c0-0.553-0.447-1-1-1s-1,0.447-1,1v4h-4c-0.553,0-1,0.447-1,1s0.447,1,1,1h4v4
                c0,0.553,0.447,1,1,1s1-0.447,1-1v-4h4c0.553,0,1-0.447,1-1S1110.547,270.278,1109.994,270.278z"/>
          </g>
            <text class="t3" x="1025" y="320" fill="#969a9d" transform="translate(80)">
              <tspan  text-anchor="middle">PM</tspan>
            </text>
        </g>
          
        <g id="phase4" class="phase-x ph4 disactive_ph">
          <g class="phase-btn">
              <circle class="c1" fill="#fff" cx="868.994" cy="115.403" r="12.5"/>
              <circle class="c2" fill="#60A6DB" cx="868.994" cy="115.403" r="12.5"/>
              <rect class="c3" x="790" y="20" width="150" height="120"></rect>
              <text class="t1" x="788" y="85" fill="#60A6DB" transform="translate(80)">
                <tspan  text-anchor="middle">Phase 4</tspan>
              </text>

              <text class="t2" x="788" y="65" transform="translate(80)" fill="#60A6DB">
                <tspan text-anchor="middle" dy="15">Protein</tspan>
              </text>
              
              <path fill="#FFFFFF" d="M873.994,114.278h-4v-4c0-0.553-0.447-1-1-1s-1,0.447-1,1v4h-4c-0.553,0-1,0.447-1,1s0.447,1,1,1h4v4
                c0,0.553,0.447,1,1,1s1-0.447,1-1v-4h4c0.553,0,1-0.447,1-1S874.547,114.278,873.994,114.278z"/>
          </g>
        </g>
          
        <g id="phase3" class="phase-x ph3 disactive_ph">
          <g class="phase-btn">
        <circle class="c1" fill="#fff" cx="591.994" cy="61.403" r="12.5"/>
              <circle class="c2" fill="#68C5AD" cx="591.994" cy="61.403" r="12.5"/>
        <rect class="c3" x="520" y="-35" width="140" height="120"></rect>
                <text class="t1" x="511" y="30" fill="#68C5AD" transform="translate(80)">
                  <tspan  text-anchor="middle">Phase 3</tspan>
                </text>

                <text class="t2" x="511" y="10" transform="translate(80)" fill="#68C5AD">
                  <tspan text-anchor="middle" dy="15">Boost</tspan>
                </text>


              <path fill="#FFFFFF" d="M596.994,60.278h-4v-4c0-0.553-0.447-1-1-1s-1,0.447-1,1v4h-4c-0.553,0-1,0.447-1,1s0.447,1,1,1h4v4
                c0,0.553,0.447,1,1,1s1-0.447,1-1v-4h4c0.553,0,1-0.447,1-1S597.547,60.278,596.994,60.278z"/>
          </g>
        </g>
        <g id="phase2" class="phase-x ph2 disactive_ph">
      <g class="phase-btn">
              <circle class="c1" fill="#fff" cx="314.994" cy="115.403" r="12.5"/>
              <circle class="c2" fill="#F3845D" cx="314.994" cy="115.403" r="12.5"/>
              <rect class="c3" x="235" y="20" width="160" height="120"></rect>

                <text class="t1" x="235" y="85" fill="#F3845D" transform="translate(80)">
                  <tspan  text-anchor="middle">Phase 2</tspan>
                </text>

                <text class="t2" x="235" y="65" transform="translate(80)" fill="#F3845D">
                  <tspan text-anchor="middle" dy="15">Defense</tspan>
                </text>

              <path fill="#FFFFFF" d="M319.994,114.278h-4v-4c0-0.553-0.448-1-1-1s-1,0.447-1,1v4h-4c-0.552,0-1,0.447-1,1s0.448,1,1,1h4v4
                c0,0.553,0.448,1,1,1s1-0.447,1-1v-4h4c0.552,0,1-0.447,1-1S320.546,114.278,319.994,114.278z"/>
          </g>
        </g>
          
        <g id="phase1" class="phase-x ph1 active_ph">
            <g class="phase-btn">
              <circle class="c1" fill="#fff" cx="78.994" cy="271.403" r="12.5"/>
              <circle class="c2" fill="#8FC859" cx="78.994" cy="271.403" r="12.5"/>
              <rect class="c3" x="0" y="170" width="160" height="120"></rect>

              <text class="t1" x="0" y="240" fill="#8FC859" transform="translate(80)">
                <tspan  text-anchor="middle">Phase 1</tspan>
              </text>

              <text class="t2" x="-1" y="220" transform="translate(80)" fill="#8FC859">
                <tspan text-anchor="middle" dy="15">Balance</tspan>
              </text>

              <path fill="#FFFFFF" d="M83.994,270.278h-4v-4c0-0.553-0.448-1-1-1s-1,0.447-1,1v4h-4c-0.552,0-1,0.447-1,1s0.448,1,1,1h4v4
                c0,0.553,0.448,1,1,1s1-0.447,1-1v-4h4c0.552,0,1-0.447,1-1S84.546,270.278,83.994,270.278z"/>
            </g>
            <text class="t3" x="-1" y="320" fill="#969a9d" transform="translate(80)">
              <tspan  text-anchor="middle">AM</tspan>
            </text>
        </g>
          
        </svg>

    <div class="arc-animation-content">
      <div class="show_phase1 show_ph current">
        <div class="product-features">
        </div>
        <a>Balance - Superfood</a>
        <p>Start your day in the most optimal manner with Arc Balance Superfood. It's unique formula balances your ph levels, improves your cellular and brain function, while also aiding your body to detoxify.</p>
      </div>

      <div class="show_phase2 show_ph">
        <div class="product-features">
        </div>
        <a>Defense - Ahiflower Omega 3</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.</p>
      </div>

      <div class="show_phase3 show_ph">
        <div class="product-features">
        </div>
        <a>Boost - Green Tea + Moringa</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.</p>
      </div>

      <div class="show_phase4 show_ph">
        <div class="product-features">
        </div>
        <a>Vegan Protein</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.</p>
      </div>

      <div class="show_phase5 show_ph">
        <div class="product-features">

        </div>
        <a>Immunity - Probiotic</a>
        <p>Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci.</p>
      </div>
    </div>
  </div>


</div>

＆＃13;

Answer 1

svg中的问题是transform="translate(80)。我从svg中删除它并将其放在CSS中。它现在在所有浏览器中都很好看。

SVG动画在Mozilla上运行不佳

1 个答案: