Css 在firefox中操纵SVG坐标

HTML:

我有一张使用SVG和CSS动画的小脸。在Chrome中，动画可以正常工作（观看大约5秒钟），但firefox似乎去掉了这些直接的SVG操作（rx、cx、cy等）

---

有没有办法在firefox中也能做到这一点，或者在这个浏览器中是不可能的？

你需要将它们重写为SMIL动画。事实上，Robert知道的比我多，但我相信Chrome是目前唯一支持CSS操作这些值/属性/属性的浏览器（Opera？）。

<svg class="asset-note-icon" viewBox="0 0 100 100">      
    <ellipse cx="38.3" ry="3.5" rx="2.4" cy="57.5"></ellipse>
    <ellipse cx="62" ry="3.5" rx="2.4" cy="57.5"></ellipse>  
    <circle cx="50.1" cy="68.2" r="4.7"></circle>
</svg>

.asset-note-icon{
  width: 120px;
}

.asset-note-icon ellipse,
.asset-note-icon path,
.asset-note-icon circle{
    fill: #636363;
}

.asset-note-icon ellipse{
    animation: blink 50s infinite;
    animation-timing-function: ease;
}

@keyframes blink {
  00.00% { ry: 3.5; cy: 57.5 }     
  10.00% { ry: 3.5 }
  10.10% { ry: 1.0 }
  10.20% { ry: 3.5 }
  10.30% { ry: 1.0 }
  10.40% { ry: 3.5 }
  20.20% { cy: 57.5 }
  20.30% { cy: 50 }
  22.30% { cy: 50 }
  22.40% { cy: 57.5 }
  45.00% { ry: 3.5 }
  45.10% { ry: 1.0 }
  48.10% { ry: 1.5 }
  48.20% { ry: 3.5 }
  99.20% { ry: 3.5 }
  99.30% { ry: 1.0 }
  99.40% { ry: 3.5 }
  100.0% { ry: 3.5; cy: 57.5 }
}