Transfer-origin не работает в SVG на сафари при масштабировании или проблеме масштабирования в сафари

Question

Я пытаюсь повернуть частично заполненный круг поверх другого круга в бесконечной анимации, но при увеличении и уменьшении он не выровнял внешний синий заполненный круг с внутренним кругом. Я также попытался с transform-box: fill-box, но это такжене работает.

CSS используется для поворота

    @keyframes rotation {
        from {
            transform: rotate(0deg);

        }
        to {
           transform: rotate(360deg);
        }
    }
.cls-5 {
       transform-origin: center center;
       //transform-box:fill-box;
        animation: rotation 1.5s infinite linear;
    }

Демонстрационная ссылка JSBin

неправильное изображение для сафари

Правильное изображение для сафари