Question

我正在尝试使用SVG创建跨浏览器动画：

HTML：

 <svg width="100" height="100">
                  <defs>
                    <pattern id="imgt1" patternUnits="userSpaceOnUse" width="100" height="100">
                      <image class="animateMove" xlink:href="http://www.freeimageslive.com/galleries/sports/sportsgames/pics/cricket_ball.jpg" width="500" height="300" preserveAspectRatio="none"></image>
                    </pattern>
                  </defs>
                  <circle cx="50" cy="50" r="50" fill="url(#imgt1)"></circle>
                </svg>

CSS：

svg:hover .animateMove{
    transform:translate(-10px,-20px);
    -webkit-transform:translate(-10px,-20px);
    -moz-transform:translate(-10px,-20px);
    -o-transform:translate(-10px,-20px)
}

.animateMove {     
 -webkit-transition:-webkit-transform .5s ease-out;
 -moz-transition:-moz-transform .5s ease-out;
 -o-transition:-o-transform .5s ease-out;
 transition:transform .5s ease-out;
 }

这基本上渲染一个圆圈并掩盖内部的图像。如果用户悬停图像，则会翻译它的原点。

它完全适用于Chrome和Safari（因此WebKit似乎有效），但在所有其他浏览器中都失败了。

有关更好的解释，请参阅以下jsfiddle：

http://jsfiddle.net/RX74Z/3/

如果我直接为图片设置动画（请参阅http://jsfiddle.net/RX74Z/6/），它也适用于Firefox，但不会显示蒙版（确实）：D。

我猜“填充”会导致所有其他浏览器出现问题。我可以使用另一种方法来创造类似的效果吗？

SVG和CSS：动画模式背景

0 个答案: