在firefox中操作SVG坐标

时间:2015-06-30 18:00:31

标签: css firefox animation svg css-animations

HTML:

<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>

CSS:

.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 }
}

http://jsfiddle.net/m8esm1t3/2/

我有一个使用SVG和CSS动画动画的小脸。在Chrome中,动画可以正常工作(观看它大约5秒钟),但看起来像firefox剥离了这些直接的SVG操作(rx,cx,cy等......)

有没有办法让这个在firefox中运行,或者在这个浏览器中是不可能的?

0 个答案:

没有答案