Wie verschiebt man ein SVG beim Scrollen um 50 Pixel nach oben?

Um ein SVG-Element beim Scrollen nach unten um 50 Pixel nach oben zu verschieben, kannst du JavaScript in Kombination mit CSS verwenden. Hier ist ein einfaches Beispiel, wie du das umsetzen kannst:

1. **HTML**: Füge dein SVG-Element in das HTML-Dokument ein.

```html
<svg id="mySvg" width="100" height="100" style="position: relative;">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
```

2. **CSS**: Stelle sicher, dass das SVG-Element relativ positioniert ist, damit du es mit JavaScript verschieben kannst.

```css
#mySvg {
transition: transform 0.2s; /* Für eine sanfte Animation */
}
```

3. **JavaScript**: Füge einen Scroll-Event-Listener hinzu, der das SVG-Element verschiebt.

```javascript
window.addEventListener('scroll', function() {
const svg = document.getElementById('mySvg');
const scrollY = window.scrollY; // Aktuelle Scroll-Position
svg.style.transform = `translateY(-${Math.min(scrollY, 50)}px)`; // Verschiebe bis zu 50px nach oben
});
```

In diesem Beispiel wird das SVG-Element um bis zu 50 Pixel nach oben verschoben, wenn du nach unten scrollst. Wenn du weiter nach unten scrollst, bleibt die Verschiebung bei 50 Pixeln.