CSS样式无法呈现

Question

这是此帖子Use of foreignobject inside svg

的后续问题

总而言之，我寻求帮助来模仿following.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文件时，动画会应用，但我不确定100％是否也应用了其他CSS属性。例如，svg在铬上的白色背景上渲染。你知道那是为什么吗？预先谢谢你。