Beispiel:Offset-path-1.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0">
<title>Pfad-Animation - 1</title>
<style>
.path {
stroke: #74943a;
stroke-width: 1;
stroke-dasharray: 4;
fill: transparent;
}
#flight {
offset-path: path('M100,180 c106,-172,246,70,410,-10 c76,-36,324,-202,390,-16 c48,134,-100,226,-200,226 l-400,0 c-124,0,-252,-116,-200,-200 z');
animation: fly 8s linear infinite;
}
@keyframes fly {
0% {
offset-distance: 0;
}
to {
offset-distance: 100%;
}
}
</style>
</head> <body>
Animationen entlang eines Pfades mit offset-path und offset-distance
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 999 600">
<defs>
<symbol id="plane">
<path d="M 55.4 24.2 L 43.4 24.2 L 37 14.2 C 38.9 13.9 42.5 12.7 42.5 10.6 C 42.5 8.5 37.6 7 36.1 7 L 32.1 7 L 27.5 0 L 18.9 0 L 21.4 7 L 21.1 7 L 21.1 14.2 L 24.2 14.2 L 27.8 24.2 L 11.6 24.2 L 4.9 17.5 L 0 17.5 L 5.8 27.3 L 5.8 35 L 0 44.8 L 4.9 44.8 L 11.6 38.1 L 27.8 38.1 L 24.2 47.8 L 21.1 47.8 L 21.1 55 L 21.4 55 L 18.9 62 L 27.8 62 L 32.5 55 L 36.4 55 C 37.9 55 42.8 53.5 42.8 51.4 C 42.8 49.6 39.2 48.1 37.3 47.8 L 43.7 37.8 L 55.6 37.8 C 59.6 37.8 74 35 74 30.8 C 73.7 27 59.3 24.2 55.4 24.2 Z"/>
</symbol>
</defs>
<path class="path" d="M100,180 c106,-172,246,70,410,-10 c76,-36,324,-202,390,-16 c48,134,-100,226,-200,226 l-400,0 c-124,0,-252,-116,-200,-200 z"/>
<use href="#plane" id="flight" fill="steelBlue" x="-37" y="-31"/>
</svg>
</body> </html>
