我有一個復(fù)選標(biāo)記動畫，可以在chrome瀏覽器上完美運(yùn)行。然而，當(dāng)使用safari時，svg根本不顯示。

$('#checkmark-svg').on('click', function(){
  svg = $(this);
  svg.removeClass('run-animation').width();
  svg.addClass('run-animation');
  return false;
})

.cls-1{
  fill:none;
  stroke:#231f20;
  stroke-miterlimit:10;
  stroke-width:5px;
}

.svg-check {
  position: inherit;
}

svg {
  margin: auto;
  width: 50px;
  height: 50px;
  display: block;
  
  .cls-1 {
    stroke: #2d77e3;
  }
}

.circle {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
}

.checkmark {
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
}

.run-animation {  
  .circle {
    animation: 2.5s circleDraw forwards;
  }

  .checkmark {
    animation: 0.75s checkmarkDraw forwards;
    animation-delay: 1s;
  }
}

@keyframes circleDraw {
  from {
    stroke-dashoffset: 700;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes checkmarkDraw {
  from {
    stroke-dashoffset: 150;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

        <svg id="checkmark-svg" class="run-animation svg-check" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 193.3 193.3">
            <circle class="cls-1 circle" cx="96.65" cy="96.65" r="94.15"/>
            <polyline class="cls-1 checkmark" points="46.9 101.4 76.9 131.4 146.4 61.9"/>
        </svg>

您使用的是最新的CSS嵌套功能，該功能仍然沒有得到廣泛支持(目前只有基于Chromium的瀏覽器和最新的Safari技術(shù)預(yù)覽版)。

通過取消嵌套所有CSS規(guī)則，您的代碼可以在所有瀏覽器中運(yùn)行，包括Safari和Firefox:

$('#checkmark-svg').on('click', function() {
  svg = $(this);
  svg.removeClass('run-animation').width();
  svg.addClass('run-animation');
  return false;
})

.cls-1 {
  fill: none;
  stroke: #231f20;
  stroke-miterlimit: 10;
  stroke-width: 5px;
}

.svg-check {
  position: inherit;
}

svg {
  margin: auto;
  width: 50px;
  height: 50px;
  display: block;
}
svg .cls-1 {
  stroke: #2d77e3;
}

.circle {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
}

.checkmark {
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
}

.run-animation .circle {
  animation: 2.5s circleDraw forwards;
}
.run-animation .checkmark {
  animation: 0.75s checkmarkDraw forwards;
  animation-delay: 1s;
}

@keyframes circleDraw {
  from {
    stroke-dashoffset: 700;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes checkmarkDraw {
  from {
    stroke-dashoffset: 150;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<svg id="checkmark-svg" class="run-animation svg-check" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 193.3 193.3">
    <circle class="cls-1 circle" cx="96.65" cy="96.65" r="94.15"/>
    <polyline class="cls-1 checkmark" points="46.9 101.4 76.9 131.4 146.4 61.9"/>
</svg>

感謝貢獻(xiàn)一個堆棧溢出的答案！

請務(wù)必回答問題。提供詳細(xì)信息并分享您的研究！但是要避免…

尋求幫助、澄清或回應(yīng)其他答案。根據(jù)意見發(fā)表聲明；用參考資料或個人經(jīng)歷來支持他們。要了解更多，請查看我們關(guān)于撰寫精彩答案的提示。