css - 动画 SVG 作为背景图像在 Chrome 但不是 Safari 中工作

Question

我正在创建一个旋转螺旋作为背景图像，并使用在 CSS 文件中声明为数据 URI 的 SVG 进行设置（参见小提琴）。动画在 Chrome 中效果很好，但 Safari 13.1 只显示螺旋并且似乎没有动画。我找不到任何明确表示最新版本的 Safari 不支持此功能的内容。独自在家工作了 5 周 - 我错过了什么还是 Safari 不支持？

（为了这个例子，我使用了一个随机图标 svg）

.spiral {
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cstyle%3E%0A%23eating %7B animation: spin 1s linear infinite; -moz-animation: spin 1s linear infinite; -webkit-animation: spin 1s linear infinite; transform-origin: center center; -moz-transform-origin: center center; -webkit-transform-origin: center center;%0A%7D @keyframes spin %7B to %7B transform: rotate(360deg); %7D%0A%7D%0A@-moz-keyframes spin %7B to %7B -moz-transform: rotate(360deg); %7D%0A%7D%0A@-webkit-keyframes spin %7B to %7B -webkit-transform: rotate(360deg); %7D%0A%7D %3C/style%3E%3Cpath id='eating' d='M40.719,43.272c-1.25-1.25-1.875-3.438-1.562-5c0,0,1.875-6.562-1.875-10.312 c-4.062-4.063-16.562-13.438-22.5-7.812c-5.625,5.625,3.75,18.437,7.812,22.5c3.75,3.75,10.312,1.875,10.312,1.875 c1.562-0.312,4.062,0.312,5,1.562c0,0,28.75,32.188,30.312,33.75c2.188,2.188,5.625,2.812,7.187,1.25s1.25-5-1.25-7.187 C72.907,72.022,40.719,43.272,40.719,43.272z M23.844,74.522c-2.187,2.188-2.812,5.625-1.25,7.188s5,1.25,7.188-1.25 c0.938-0.938,9.688-10.625,17.5-19.688c-1.25-1.562-2.812-3.125-4.063-4.375C34.469,64.835,24.782,73.585,23.844,74.522z M60.407,47.022c1.25-1.25,3.438-1.875,5-1.562c0,0,5.312,0.312,8.75-3.438c2.188-2.188,10.625-11.25,12.812-15.938l-0.312-0.313 c-5.625,5.625-14.688,14.062-15,13.438c-0.312-0.312,8.125-9.687,13.438-15l-0.625-0.625c-5.625,5.625-14.688,14.062-15,13.438 c-0.312-0.312,8.125-9.687,13.438-15l-0.625-0.625c-5.625,5.625-14.688,14.062-15,13.438c-0.312-0.312,8.125-9.688,13.438-15 l-0.625-0.625c-5.625,5.625-14.688,14.062-15,13.438c-0.312-0.313,8.125-9.688,13.437-15l-0.312-0.312 c-4.688,2.5-13.75,10.625-15.938,12.812c-3.75,3.75-3.438,8.75-3.438,8.75c0.312,1.562-0.312,4.062-1.562,5c0,0-2.188,1.875-5.625,5 c1.25,0.938,2.188,2.188,3.438,3.125C58.219,48.897,60.407,47.022,60.407,47.022z'/%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 200px;
  width:100%;
}

<div class="spiral"></div>

标签： cssanimationsvgdata-uri