FF: 7m breite Grafik wird lokal angezeigt, aber nicht im Web

[Rolf B]

Hallo Linuchs,

Keine Ahnung warum der Fuchs sie nicht mag. Bei mir tut er's auch nicht. Standalone-Darstellung funktioniert. Ein Bug in riesigen SVGs?

Chrome zeigt sie an, ist aber bei der Darstellung nicht auf dem Punkt. Teils ist sie über einen Takt daneben. Das hat mehrere Gründe:

• Du startest die Musik während das Notenbild noch auf dem Violinschlüssel ist. D.h. du brauchst einen Start-Offset in die Partitur
• Die Musescore-Takte sind nicht gleich breit in der Darstellung
• Du setzt eine Höhe von 98% für die Notengrafik, das verändert die Breite um 700px. Hier kann es Rundungsfehler geben. Es ist SVG, das skaliert frei, setze lieber die 100%.

Der Scrollbar unter der Notengrafik ist so eine Sache. Er ist natürlich nützlich, um sich die Partitur anzuschauen, aber wegen des transforms schrumpft er im Laufe des Abspielens auf 0 und ist irgendwann ganz weg. Das irritiert.

Besser wäre, mit scrollLeft auf dem div Container um das img zu scrollen statt mit transform. Glaub ich.

Gib dem img ein display:block (dann passt das auch mit 100% Höhe) und einen linken und rechten Margin so, dass Anfang und Ende des abzuspielenden Bereichs genau unter dem roten Strich sind. Das ist etwas tricky:

margin-right: calc(75% + 4px - 35px);
margin-left: calc(25% - 50px)

Die 75% und 25% kommen aus der Platzierung der roten Linie. Die 4px sind die Breite der roten Linie. Die Korrekturwerte 35px und 50px sind dagegen Image-Abhängig und natürlich auch abhängig davon, auf welche Größe Du es skalierst. Diese Werte musst Du zur Laufzeit berechnen, fürchte ich. Aber die kannst Du dann in custom properties (siehe SelfWiki) ablegen.

margin-right: calc(75% + 4px - var(--offset-left));
margin-left: calc(25% - var(--offset-right));

Die Werte für --offset-left und --offset-right setzt Du ins style-Attribut des img Elements, inclusive der px Einheit.

Und die scrollLeft-Eigenschaft des Elterncontainers kann dann von 0 bis X laufen, mit X = Breite des img minus 4px minus --offset-left minus --offset-right.

Das Parent-Element vom img sollte dann kein overflow-y:scroll mehr haben, das ist ein unnötiger Scrollbar.

MuseScore ist übrigens nicht gut geeignet für deine Zwecke. Es ist kostenlos, sicher. Die Autoren haben vielleicht Ahnung von Musik, aber keine gute Ahnung von SVG und das Ergebnis ist ein 6,3MB großes Datenmonster voller Redundanzen und mit Zahlenwerten mit unsinnigster Wahl der Nachkommastellen.

Wogegen Du auch nicht gefeit bist - warum setzt Du in movePartitur ein toFixed auf currentSec und currentProzent, wenn Du die Scrollposition bestimmst? Da rechnest Du doch noch und kannst keine Rundungen gebrauchen.

Rolf