如何移动 SVG 蒙版以显示最初隐藏的形状？

Question

我正在尝试创建一个类似于此 gif 中的动画：

这是我的 HTML/SVG/CSS :

<!DOCTYPE html>
<html>
<head>
  <title>svg animation logo</title>
    <style>
      path,
      line,
      circle {
        fill: none;
        stroke: #164a07;
        stroke-width: 4;
      }

      svg {
        background: #9bc345;
      }
  </style>
</head>

<body>
  <svg width="180" height="180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="squars">
      <path id="sq3" d="m 55.693069,108.71287 20.940594,0.44555 0.891089,21.38613 -21.831683,-0.44554 z"/>
      <path id="sq2" d="m 54.56835,75.965348 20.940594,0.44555 0.891089,21.386127 -21.831683,-0.44554 z"/>
      <path id="sq1" d="m 55.459439,43.886141 20.940594,0.44555 0.891089,21.386127 -21.831683,-0.44554 z"/>
    </g>
    <g id="ticks">
      <path id="tick1" d="m 60.136501,49.945523 6.237623,7.79703 c 0,0 6.014852,-16.930694 12.252476,-16.707921 6.237623,0.222772 -0.222773,0.222772 -0.222773,0.222772"/>
      <path id="tick2" d="m 60.816832,82.871287 6.237623,7.79703 c 0,0 6.014852,-16.930694 12.252476,-16.707921 6.237623,0.222772 -0.222773,0.222772 -0.222773,0.222772"/>
      <path id="tick3" d="m 60.359273,115.2178 6.237623,7.79703 c 0,0 6.014852,-16.93069 12.252476,-16.70792 6.237623,0.22277 -0.222773,0.22277 -0.222773,0.22277"/>
</body>
</html>

我可以用面具隐藏复选标记:

<defs>
    <mask id="mmm">
        <rect width="180" height="50" x="0" y="92" fill="black" />
        <rect width="180" height="98" x="0" y="0" fill="white" />
    </mask>
</defs>

但我不知道如何让它们动画化。我认为我需要使用 <animateTransform attributeName="transform" 但我真的不明白该怎么做。有人可以帮我解决这个问题吗？

Answer 1

我认为为 stroke-dasharray 设置动画更有意义。这样，您就可以控制应该可见的路径部分。 pathLength 属性确定路径的全长，然后 stroke-dasharray 属性中的第一个值控制笔划的长度。

我将所有动画“链接”在一起，使它们一个接一个地开始。

path,
line,
circle {
  fill: none;
  stroke: #164a07;
  stroke-width: 4;
}

svg {
  background: #9bc345;
}

<svg width="180" height="180" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <g id="squars">
    <path id="sq3" d="m 55.693069,108.71287 20.940594,0.44555 0.891089,21.38613 -21.831683,-0.44554 z"/>
    <path id="sq2" d="m 54.56835,75.965348 20.940594,0.44555 0.891089,21.386127 -21.831683,-0.44554 z"/>
    <path id="sq1" d="m 55.459439,43.886141 20.940594,0.44555 0.891089,21.386127 -21.831683,-0.44554 z"/>
  </g>
  <g id="ticks">
    <path id="tick1" d="m 60.136501,49.945523 6.237623,7.79703 c 0,0 6.014852,-16.930694 12.252476,-16.707921 6.237623,0.222772 -0.222773,0.222772 -0.222773,0.222772" pathLength="10" stroke-dasharray="0 10">
      <animate id="ani1" attributeName="stroke-dasharray" begin="1s" values="0 10;10 10" dur="1.5s" fill="freeze" />
    </path>
    <path id="tick2" d="m 60.816832,82.871287 6.237623,7.79703 c 0,0 6.014852,-16.930694 12.252476,-16.707921 6.237623,0.222772 -0.222773,0.222772 -0.222773,0.222772" pathLength="10" stroke-dasharray="0 10">
      <animate id="ani2" attributeName="stroke-dasharray" begin="ani1.end" values="0 10;10 10" dur="1.5s" fill="freeze" />
    </path>
    <path id="tick3" d="m 60.359273,115.2178 6.237623,7.79703 c 0,0 6.014852,-16.93069 12.252476,-16.70792 6.237623,0.22277 -0.222773,0.22277 -0.222773,0.22277" pathLength="10" stroke-dasharray="0 10">
    <animate id="ani3" attributeName="stroke-dasharray" begin="ani2.end" values="0 10;10 10" dur="1.5s" fill="freeze" />
    </path>
  </g>
</svg>

你基本上可以在 text/lines 上做同样的动画，需要在右边。

如何移动 SVG 蒙版以显示最初隐藏的形状？

How can I move an SVG mask to show a shape that is initially hidden?

html

svg