how to move the SVG mask that initially hides the shape, then shows-CodePudding

I want to make a gif (in the link) and I can't figure out how to hide the checkmarks first with a mask and then open. enter image description here

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

My html part looks like this (if needed)

<!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>
    
    <!-- --->
    <img src="https://ltdfoto.ru/images/2022/05/19/06_speed.gif">
  
    <svg width="180" height="180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
       
            <!--squars--->
            <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>

I'm going to use <animateTransform attributeName="transform" to move my mask from left to right, but I don't really understand how to do it, please help me with this (it seems I shouldn't use anything other than HTML and SVG)

CodePudding user response：

I think that it would make more sense to animate the stroke-dasharray. With that, you can control the part of the path that should be visible. The pathLength attribute determines the full length of the path and then the first value in the stroke-dasharray attribute controls the length of the stroke.

I "chained" together all the animation, so that they begin one after the other.

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>

And you can basically do the same kind of animation on the text/lines that need to be to the right.