如何移動最初隱藏形狀的SVG蒙版，然后顯示-有解無憂

我想制作一個 gif（在鏈接中），但我不知道如何先用蒙版隱藏復選標記，然后再打開。在此處輸入影像描述

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

我的 html 部分看起來像這樣（如果需要）

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

我將使用 <animateTransform attributeName="transform" 將我的面具從左向右移動，但我真的不明白該怎么做，請幫助我（似乎我不應該使用任何其他東西HTML 和 SVG）

uj5u.com熱心網友回復：

我認為對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>

你基本上可以在需要在右邊的文本/行上做同樣的影片。

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/484346.html

標籤：html svg

上一篇：如何確定陣列中最常出現的數字？

下一篇：我看過很多帖子說“要添加多個影片，我們可以通過使用逗號（，）來添加它們”，但在我的情況下，它沒有發生