我第一次創建了 SVG 影片。這個 SVG 影片是從右到左構建的。這是作業。不幸的是，影片再次溶解。我找不到錯誤，或者我不知道為什么。現在，我一方面對如何在影片完成后自動停止影片感興趣，另一方面對它如何再次均勻溶解感興趣。
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920 319" style="enable-background:new 0 0 1920 319;" xml:space="preserve">
<g>
<line fill="none" stroke-width="2" stroke="red" stroke-dasharray="2000" stroke-dashoffset="2000" x1="1920" y1="156" x2="275" y2="156">
<animate id="p1"
attributeName="stroke-dashoffset"
begin="0.1s"
values="2037;0;2037"
dur="15s"
calcMode="linear"
/>
</line>
</g>
<g>
<circle fill="none" stroke-width="2" stroke="red" stroke-dasharray="2000" stroke-dashoffset="2000" cx="149" cy="157" r="126">
<animate id="p2"
attributeName="stroke-dashoffset"
begin="6.1s"
values="2037;0;2037"
dur="15s"
calcMode="linear"
/>
</circle>
</g>
</svg>uj5u.com熱心網友回復：
你需要各種調整。
- 定義一個常量 pathLength 使一切變得更容易，然后您可以將所有 stroke-dasharray 和 stroke-dashoffsets 設定為該值。
- 如果您不希望影片撤消，那么您需要更改 values 屬性使其不會展開
- 現在影片只做了以前的一半，你需要它們在更短的時間內運行它們。當他們停止更改渲染時，他們并沒有真正完成，因為路徑長度與 stroke-dashoffset 或 stroke-dasharray 值不同。
- 由于第一個影片按預期結束，您可以在第一個影片結束時開始第二個影片。
- fill="freeze" 將影片保持在它們完成時的最后狀態。
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920 319" style="enable-background:new 0 0 1920 319;" xml:space="preserve">
<g>
<line fill="none" stroke-width="2" stroke="red" stroke-dasharray="100" stroke-dashoffset="100" x1="1920" y1="156" x2="275" y2="156" pathLength="100">
<animate id="p1"
attributeName="stroke-dashoffset"
begin="0.1s"
values="100;0"
dur="3s"
calcMode="linear"
fill="freeze"
/>
</line>
</g>
<g>
<circle fill="none" stroke-width="2" stroke="red" stroke-dasharray="100" stroke-dashoffset="100" pathLength="100" cx="149" cy="157" r="126">
<animate id="p2"
attributeName="stroke-dashoffset"
begin="p1.end"
values="100;0"
dur="3s"
calcMode="linear"
fill="freeze"
/>
</circle>
</g>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/506747.html
標籤：svg