1

我正在尝试使用 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。

我猜“填充”会在所有其他浏览器中引起麻烦。我可以使用另一种方法来创建类似的效果吗？

4

0 回答 0