我正在嘗試創建一個像這個 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"但我真的不明白如何去做。有人可以幫我嗎？
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/qukuanlian/486848.html
上一篇：用于svg路徑減法的掩碼復合