Javascript 使用SVG封面逐步显示png图像_Javascript_Css_Animation_Svg_Png

Javascript 使用SVG封面逐步显示png图像

javascript css animation svg

Javascript 使用SVG封面逐步显示png图像,javascript,css,animation,svg,png,Javascript,Css,Animation,Svg,Png,我想用动画显示png图像（圆形）。开始时，图像不会出现，但会出现“顺时针显示：块”效果我的想法是一个SVG封面，具有理想的效果，从红色到透明填充。这可能吗有什么想法吗谢谢。使用：页面标题这里有一个简单的方法。它只是一个钻石形状，比图片大，我像一个闭合的扇子一样慢慢地把它的点折叠在一起由于菱形的形状，它的扫描速度并不一致。但是，如果使用较短的动画持续时间，您不会真正注意到。如果你想让速度更稳定，你可以增加更多的分数。例如，使用八角形，而不是菱形你的意思是在一个圆圈内擦拭时钟吗

我想用动画显示png图像（圆形）。开始时，图像不会出现，但会出现“顺时针显示：块”效果

我的想法是一个SVG封面，具有理想的效果，从红色到透明填充。这可能吗

有什么想法吗

谢谢。

使用

：


页面标题

这里有一个简单的方法。它只是一个钻石形状，比图片大，我像一个闭合的扇子一样慢慢地把它的点折叠在一起

由于菱形的形状，它的扫描速度并不一致。但是，如果使用较短的动画持续时间，您不会真正注意到。如果你想让速度更稳定，你可以增加更多的分数。例如，使用八角形，而不是菱形

你的意思是在一个圆圈内擦拭时钟吗？如果你能澄清你要寻找的过渡/动画类型，我将更新下面的答案。@tgiachetti是的，就像一个圆圈内的时钟擦拭（顺时针）。好的，我来看看

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  <script src="main.js"></script>
</head>
<body>
  <svg width=272 height=92 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink">       
    <image xlink:href="./google.png" height="100%" width="100%"/>
    <rect x="0" y="0" width="272" height="90" fill="#FFF">
        <animateTransform attributeName="transform"
                          attributeType="XML"
                          additive="sum"
                          type="scale"
                          from="1 1"
                          to="0 0"
                          dur="2s"
                          fill="freeze"/>
    </rect>
  </svg>

</body>
</html>