svg的Javascript动画

我正在尝试使用javascript设置动画圆的半径＃mask-hole-2。以便它从0到145px的半径动画。但我不知道如何以一种常见的方式做到这一点。我不能使用CSS因为似乎有另一个规范使用Firefox的动画口罩与CSS。任何帮助表示赞赏。svg的Javascript动画

<svg width="400" height="300"> 
    <defs> 
    <mask id="hole"> 
    <circle id="mask-hole-1" cx="165" cy="156.5" r="165" fill="white" /> 
    <rect id="mask-hole-3" width="100%" height="100%" fill="white"/> 
    <circle id="mask-hole-2" cx="165" cy="156.5" r="145" /> 
    </mask> 
    </defs> 
    <image width="400" height="300" 
     xlink:href="http://lorempixel.com/400/300/sports/" 
     mask="url(#hole)"/> 
</svg>

来源

2017-08-10 toruwe

您可以jQuery animate()

做到这一点试试这个示例代码我只是写，这将使孔收缩了。这应该让你知道你可以为你的svg中的其他效果做些什么。

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript"> 
function ani() 
{ 
$("#mask-hole-2").animate({ 
r: 0 
}, 2000) 
} 
</script> 
</head> 
<body> 
<svg width="400" height="300"> 
    <defs> 
    <mask id="hole"> 
    <circle id="mask-hole-1" cx="165" cy="156.5" r="165" fill="white" /> 
    <rect id="mask-hole-3" width="100%" height="100%" fill="white"/> 
    <circle id="mask-hole-2" cx="165" cy="156.5" r="145" /> 
    </mask> 
    </defs> 
    <image width="400" height="300" 
     xlink:href="http://lorempixel.com/400/300/sports/" 
     mask="url(#hole)"/> 
</svg> 
<input type="button" value="animate" onclick="ani()" /> 
</body> 
</html>

希望能回答你的问题。

来源

2017-08-10 10:36:33 JCooke

试试这个办法：

var circle = $("#mask-hole-2"); 
 
var bigger = false; 
 

 
setInterval(function(){ 
 
    
 
    if(bigger == true) 
 
    { 
 
    circle.attr("r", Number(circle.attr("r"))+1); 
 
    } 
 
    else 
 
    { 
 
    circle.attr("r", Number(circle.attr("r"))-1); 
 
    } 
 
    
 
    if(Number(circle.attr("r")) >= 145) 
 
    { 
 
    bigger = false; 
 
    } 
 
    
 
    if(Number(circle.attr("r")) <= 1) 
 
    { 
 
    bigger = true; 
 
    } 
 

 

 
}, 1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg width="400" height="300"> 
 
    <defs> 
 
    <mask id="hole"> 
 
    <circle id="mask-hole-1" cx="165" cy="156.5" r="165" fill="white" /> 
 
    <rect id="mask-hole-3" width="100%" height="100%" fill="white"/> 
 
    <circle id="mask-hole-2" cx="165" cy="156.5" r="145" /> 
 
    </mask> 
 
    </defs> 
 
    <image width="400" height="300" 
 
     xlink:href="http://lorempixel.com/400/300/sports/" 
 
     mask="url(#hole)"/> 
 
</svg>

来源

2017-08-10 10:53:14

THX至今。这接近我想要达到的。我想要＃mask-hole-1在2秒内将其半径从0改为175.在2s后＃mask-hole-2也应该将其半径从0更改为175。你能否调整片段？ – toruwe

你只需要做同样的动作，你可以用手做，请将答案标为正确^^ –

svg的Javascript动画

回答

相关问题