У меня есть анимированный флажок SVG, к которому я хочу добавить тень. Тень отлично работает во всех браузерах, однако в Safari я вижу странную ошибку, когда анимация работает (с тенью), но после завершения анимации тень обрезается и обрезается на границекоробка. Я думал, что это может быть проблема с переполнением, полем или заполнением, но ни одна из них, похоже, не исправляет это. Любые предложения?
Вот код, о котором идет речь:
<svg id="successAnimation" class="animated" xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140">
<path id="successAnimationResult" fill="#D8D8D8" d="M70 120C42.386 120 20 97.614 20 70 20 42.386 42.386 20 70 20 97.614 20 120 42.386 120 70 120 97.614 97.614 120 70 120ZM47.266 66.452 44.734 69.548 68.287 88.819 95.552 55.261 92.448 52.739 67.713 83.181 47.266 66.452Z"></path>
<circle id="successAnimationCircle" cx="70" cy="70" r="48" stroke="#979797" stroke-width="4" stroke-linecap="round" fill="transparent"></circle>
<polyline id="successAnimationCheck" stroke="#979797" stroke-width="4" points="46 68 68 86 94 54" fill="transparent"></polyline>
</svg>
Вот полный код с CSS: https://codepen.io/bluestarstudios/pen/GRRBmdL