有人可以幫我處理 svg 嗎？我正在嘗試創建泵葉輪的影片。我想要的是 svg 的最后 4 個元素來做旋轉葉輪效果。讓它看起來像是在旋轉。真正的效果是將元素升高一個位置，而留在上方的元素在其打開時出現在下方等等。我不知道怎么做。非常感謝
影像 svg
icon_return_pump_1:
styles:
custom_fields:
icon:
- margin-left: -15%
custom_fields:
icon: >
[[[
let state = 'on';
return `
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="55.000000pt" height="55.000000pt" viewBox="0 0 512.000000 512.000000" preserveAspectRatio="xMidYMid meet">
<style>
.start {
}
.on {
}
.end {
}
.start_timeout {
}
.end_timeout {
}
@keyframes on {
0% {
transform: scale(0.5);
}
20% {
transform: scale(1);
}
40% {
transform: scale(1);
}
60% {
transform: scale(1);
}
80% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
.on {
animation: on 0.8s;
transform-origin: center;
}
</style>
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path fill="#9da0a2" d="M895 4466 c-37 -17 -70 -52 -84 -89 -6 -16 -11 -78 -11 -138 0 -105 2 -113 39 -202 43 -100 85 -235 96 -310 l7 -47 498 0 498 0 7 47 c11 75 53 210 96 312 l41 94 -4 123 c-3 133 -10 153 -72 198 -27 21 -40 21 -554 23 -424 2 -533 0 -557 -11z"/>
<path fill="#9da0a2" d="M960 2400 l0 -1120 160 0 160 0 0 -80 0 -79 -429 -3 c-416 -3 -430 -4 -457 -24 -64 -47 -69 -63 -69 -214 0 -151 5 -167 69 -214 l27 -21 2139 0 2139 0 27 21 c64 47 69 63 69 214 0 151 -5 167 -69 214 -27 20 -40 21 -537 24 l-509 3 0 159 0 160 160 0 160 0 0 80 0 80 -480 0 -480 0 0 -80 0 -80 160 0 160 0 0 -160 0 -160 -880 0 -880 0 0 80 0 80 160 0 160 0 0 1120 0 1120 -480 0 -480 0 0 -1120z"/>
<path fill="#9da0a2" d="M2238 3439 l-158 -79 0 -960 0 -960 160 -80 160 -80 0 1120 c0 616 -1 1120 -2 1119 -2 0 -74 -36 -160 -80z"/>
<path fill="#9da0a2" d="M2560 2400 l0 -1120 160 80 160 80 0 960 0 960 -160 80 -160 80 0 -1120z"/>
<path fill="#9da0a2" d="M415 3346 c-41 -18 -83 -69 -90 -109 -3 -18 -5 -406 -3 -864 3 -822 3 -832 24 -859 39 -53 71 -69 134 -69 63 0 95 16 134 69 18 23 22 45 24 137 l4 109 79 0 79 0 0 640 0 640 -79 0 -79 0 -4 109 c-3 118 -12 141 -70 184 -33 25 -113 32 -153 13z"/>
<path fill="#9da0a2" d="M3040 3280 l0 -80 480 0 480 0 0 80 0 80 -480 0 -480 0 0 -80z"/>
<path fill="#9da0a2" d="M4160 2400 l0 -960 33 0 c65 1 174 31 257 71 164 81 297 253 335 434 11 54 15 155 15 455 0 439 -4 474 -71 610 -58 118 -161 221 -279 279 -83 40 -192 70 -257 71 l-33 0 0 -960z"/>
<path class="${state}" fill="#9da0a2" d="M3040 2880 l0 -160 480 0 480 0 0 160 0 160 -480 0 -480 0 0 -160z"/>
<path class="${state}" fill="#9da0a2" d="M3040 2400 l0 -160 480 0 480 0 0 160 0 160 -480 0 -480 0 0 -160z"/>
<path class="${state}" fill="#9da0a2" d="M3040 1920 l0 -160 480 0 480 0 0 160 0 160 -480 0 -480 0 0 -160z"/>
</g>
</svg>
`;
]]]
uj5u.com熱心網友回復：
這就是我的做法：我會用一條非常粗的線替換這些路徑，并帶有一個筆劃-dasharay，我會為該線的stroke-dashoffset設定影片。
@keyframes on {
100% {
stroke-dashoffset:1920
}
}
.on {
animation: on 0.8s infinite;
}<svg viewBox="0 0 512.000000 512.000000"width="200" >
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="#9da0a2" stroke="none">
<path d="M895 4466 c-37 -17 -70 -52 -84 -89 -6 -16 -11 -78 -11 -138 0 -105 2 -113 39 -202 43 -100 85 -235 96 -310 l7 -47 498 0 498 0 7 47 c11 75 53 210 96 312 l41 94 -4 123 c-3 133 -10 153 -72 198 -27 21 -40 21 -554 23 -424 2 -533 0 -557 -11z" />
<path d="M960,2400L960,1280L1120,1280L1280,1280L1280,1200L1280,1121L851,1118C435,1115,421,1114,394,1094C330,1047,325,1031,325,880C325,729,330,713,394,666L421,645L2560,645L4699,645L4726,666C4790,713,4795,729,4795,880C4795,1031,4790,1047,4726,1094C4699,1114,4686,1115,4189,1118L3680,1121L3680,1280L3680,1440L3040,1440L3200,1440L3360,1440L3360,1280L3360,1120L2480,1120L1600,1120L1600,1200L1600,1280L1760,1280L1920,1280L1920,2400L1920,3520L1440,3520L960,3520L960,2400Z" />
<path d="M2238 3439 l-158 -79 0 -960 0 -960 160 -80 160 -80 0 1120 c0 616 -1 1120 -2 1119 -2 0 -74 -36 -160 -80z" />
<path d="M2560 2400 l0 -1120 160 80 160 80 0 960 0 960 -160 80 -160 80 0 -1120z" />
<path d="M4160 2400 l0 -960 33 0 c65 1 174 31 257 71 164 81 297 253 335 434 11 54 15 155 15 455 0 439 -4 474 -71 610 -58 118 -161 221 -279 279 -83 40 -192 70 -257 71 l-33 0 0 -960z" />
<path d="M415 3346 c-41 -18 -83 -69 -90 -109 -3 -18 -5 -406 -3 -864 3 -822 3 -832 24 -859 39 -53 71 -69 134 -69 63 0 95 16 134 69 18 23 22 45 24 137 l4 109 79 0 79 0 0 640 0 640 -79 0 -79 0 -4 109 c-3 118 -12 141 -70 184 -33 25 -113 32 -153 13z"/>
<path class="on" stroke="#9da0a2" stroke-width="970" d="M3530 3360V1440" stroke-dasharray="250 150" />
</g>
</svg>觀察：我修改了第二條路徑，因為我想移除與旋轉引擎對應的位。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/385333.html