Question

我想用动画显示png图像（圆形）。在开始时，图像不会出现，但会出现＆＃34;顺时针显示：block＆＃34;效果。

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

有什么想法吗？

感谢。

Answer 1

使用<animateTransform>：

<!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>

Answer 2

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

由于钻石的形状，它没有一致的扫描速度。但是如果你使用短动画持续时间，你就不会注意到。如果要使速度更加一致，可以添加更多点。例如，使用八角形而不是钻石。

＆＃13;

<svg width="400" height="400" viewBox="0 0 400 400">

  <image href="https://i.imgur.com/pHSdFlP.jpg" width="400" height="400"/>
  <polygon points="200,-200, 600,200, 200,600, -200,200" fill="red">
    <animate attributeName="points"
             attributeType="XML"
             dur="1s"
             values="200,-200, 600,200, 200,600, -200,200, 200,-200, 200,200;
                     600,200, 600,200, 200,600, -200,200, 200,-200, 200,200;
                     200,600, 200,600, 200,600, -200,200, 200,-200, 200,200;
                     -200,200, -200,200, -200,200, -200,200, 200,-200, 200,200;
                     200,-200, 200,-200, 200,-200, 200,-200, 200,-200, 200,200"
             fill="freeze"/>
  </polygon>

</svg>

＆＃13;

用SVG封面逐步显示png图像

2 个答案: