我正试图在一个不停留的面具下动画图像的移动 我有两种方法：一种使用mask属性，另一种使用th clip
请参阅http://jsfiddle.net/2Aecz/或以下
的工作脚本<html>
<head>
<style>
#myimage {
clip-path: url(#mask1);
position: absolute;
}
</style>
</head>
<body>
<img id="myimage" src="http://lorempixel.com/100/100" >
<svg width="0" height="0">
<defs>
<clipPath id="mask1">
<circle cx="50" cy="50" r="50" />
</clipPath>
</defs>
</svg>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$( document ).ready(function() {
$( "#myimage" ).click(function() {
$( "#myimage" ).animate({ "left": "+=5px" }, "slow" );
var left = $('path, polygon, circle').attr('cx');
$('path, polygon, circle').attr('cx', left-5);
});
});
</script>
</body>
请参阅http://jsfiddle.net/XdtNy/或以下
的工作脚本<html>
<head>
<style>
#myimage {
mask: url("#mask2");
position: absolute;
}
</style>
</head>
<body>
<img id="myimage" src="http://lorempixel.com/100/100" >
<svg width="0" height="0">
<defs>
<mask id="mask2" >
<circle cx="50" cy="50" r="40" style="fill: #ffffff"/>
</mask>
</defs>
</svg>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$( document ).ready(function() {
$( "#myimage" ).click(function() {
$( "#myimage" ).animate({ "left": "+=5px" }, "slow" );
var left = $('path, polygon, circle').attr('cx');
$('path, polygon, circle').attr('cx', left-5);
});
});
</script>
</body>
如何将图像和遮罩（反向）一起移动并移动？或者还有其他方法可以动画这个吗？
答案 0 :(得分：1)
目前，这种屏蔽方法似乎在许多浏览器中都不受支持，这在生产代码中可能没用。
话虽如此，我会将图像应用于块对象的背景，然后为背景设置动画。这样，对象保持原位，但移动仅应用于背景的偏移。
实施例： http://jsfiddle.net/R5FQY/
HTML：
<div id="myimage2"> </div>
<svg width="0" height="0">
<defs>
<clipPath id="mask">
<circle cx="50" cy="50" r="50" />
</clipPath>
</defs>
</svg>
CSS：
#myimage2 {
background:transparent url('http://lorempixel.com/100/100');
width:100px;
height:100px;
clip-path: url(#mask);
}
使用Javascript：
$( document ).ready(function() {
$( "#myimage2" ).click(function() {
$(this).animate({ 'backgroundPosition': "+=5px" }, "slow" );
});
});