Beispiel:Offset-path-3.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 - 3</title>
<style> svg { width: 999px; }
.animated, .flight {
animation: fly 12s linear infinite;
anchor-x: 50%;
anchor-y: 50%;
offset-anchor: var(--anchor-x) var(--anchor-y);
offset-path: url('#path');
}
.flight {
transform-box: fill-box; animation-delay: -.5s;
} .animated {
background: steelblue; offset-position: 0 0; offset-rotate: 0deg; }
@keyframes fly {
0% { offset-distance: 0%; }
100% { offset-distance: 100%; }
}
.controls { margin-bottom: 1rem; }
.label {
position:absolute; width: 5em; aspect-ratio: 1/1; opacity: 0.7; border: thin solid; border-radius: 0.3em; text-align: center; padding: 0.2em 0.5em; font-weight: bold; top: 0px;
} .original {
top: 0; left: 15em; background: gold;
}
.original::after {
position:absolute; content: " "; width: var(--dot-width); border-radius:50%; aspect-ratio: 1; background: red; top: calc(50% - 0.2em); left: calc(50% - 0.2em);
}
.anchor-dot {
width: var(--dot-width); aspect-ratio: 1; border-radius: 50%; background: red; position: absolute; left: var(--anchor-x); top: var(--anchor-y) ; pointer-events: none;
}
/* zur Visualisierung und als Referenz */
- path { stroke: #74943a; stroke-width: 2; fill: none; stroke-dasharray: 4; }
- stage {
position:relative; --dot-width: 0.4em;
}
body {max-width:60em;}
</style> </head> <body>
Pfad-Animation mit offset-anchor und offset-position
<fieldset> <legend>X anchor</legend> <label><input type="radio" name="anchor-x" value="0%" checked> left</label> <label><input type="radio" name="anchor-x" value="50%"> center</label> <label><input type="radio" name="anchor-x" value="100%"> right</label> </fieldset>
<fieldset> <legend>Y anchor</legend> <label><input type="radio" name="anchor-y" value="0%" checked> top</label> <label><input type="radio" name="anchor-y" value="50%"> center</label> <label><input type="radio" name="anchor-y" value="100%"> bottom</label> </fieldset>
<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"/>
<circle r="3" fill="red" />
</symbol>
</defs>
<path id="path" d="M250,200 l450,250 a140,140 0 1,0 0,-250 l-450,250 a140,140 0 1,1 0,-250 z"/>
<use href="#plane" style="fill:gold; fill-opacity:0.7;stroke: steelblue; stroke-width:1;"/> <use href="#plane" class="flight" style="fill:steelBlue;"/>
</svg>
Flight 707
Flight 707
<script> document.addEventListener('DOMContentLoaded', function () { const targets = document.querySelectorAll('.flight, .animated');
function updateAnchor() {
const x = document.querySelector('input[name="anchor-x"]:checked').value;
const y = document.querySelector('input[name="anchor-y"]:checked').value;
targets.forEach(el => {
el.style.setProperty('--anchor-x', x);
el.style.setProperty('--anchor-y', y);
});
}
document.querySelectorAll('input[name="anchor-x"], input[name="anchor-y"]')
.forEach(input => input.addEventListener('change', updateAnchor));
}); </script>
</body> </html>
