CSS стиль не рендеринг

Question

Это дополнительный вопрос к этому посту Использование чужого объекта внутри svg

Подводя итог, я попросил помочь mimi c, что делает следующее. html делает в файле .svg

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: cornsilk;
}

.container {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container svg {
    height: 50vh;
    border: 1px solid;
    padding: 10px;
}

.heart {
    fill: #D75A4A;
    stroke: #fff;
    animation: stroke-anim 2s infinite alternate, heart-scaling 2s infinite alternate, heart-fill 3s infinite alternate;
    transform-origin: 50%;
    transition: all 0.5s;
}

        
@keyframes stroke-anim {
    0% {
        stroke-dasharray: 157px 157px;
        stroke-dashoffset: 157px;
    }
    100% {
        stroke-dashoffset: 0px;
        stroke-dasharray: 5px 2px;
    }
}

@keyframes heart-scaling {
    0% {
        transform: scale(0.5);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes heart-fill {
    0% {
        fill: Aquamarine;
    }
    25% {
        fill: Brown;
    }
    50% {
        fill: DarkGrey;
    }
    75% {
        fill: DarkOrange;
    }
    100% {
        fill: DarkTurquoise;
    }
}

<div class="container">
    <svg viewBox="0 0 50 50">
        <path class="heart" d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543
c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503
c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z" /> </svg>
</div>

@ enxaneta предложила следующее

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: cornsilk;
}

.container {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container svg {
    height: 50vh;
    border: 1px solid;
    padding: 10px;
}

.heart {
    fill: #D75A4A;
    stroke: #fff;
    animation: stroke-anim 2s infinite alternate, heart-scaling 2s infinite alternate, heart-fill 3s infinite alternate;
    transform-origin: 50%;
    transition: all 0.5s;
}


@keyframes stroke-anim {
    0% {
    stroke-dasharray: 157px 157px;
    stroke-dashoffset: 157px;
    }

    100% {
    stroke-dashoffset: 0px;
    stroke-dasharray: 5px 2px;
    }
}

@keyframes heart-scaling {
    0% {
    transform: scale(0.5);
    }

    100% {
    transform: scale(1);
    }
}

@keyframes heart-fill {
    0% {
    fill: Aquamarine;
    }

    25% {
    fill: Brown;
    }

    50% {
    fill: DarkGrey;
    }

    75% {
    fill: DarkOrange;
    }

    100% {
    fill: DarkTurquoise;
    }
}

<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
    <path class="heart" d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543
    c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503
    c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z" />
</svg>

Когда я открываю этот файл .svg в браузере (chrome, edge), анимация применяется, но я не уверен на 100%, если другие CSS свойства применяются также. Например, svg отображает на белом фоне chrome. Знаете почему? Заранее спасибо.