SVG Auswahl funktioniert nicht durchgehend

Question

Guten Tag,

ich plane eine Studie bei der mehrere Entscheidungen zwischen zwei Optionen getroffen werden soll. Diese würde ich gerne graphisch als SVG darstellen und die Auswahl darin implementieren. Ich habe einmal in einen Pretest beispielhaft drei solcher Entscheidungen ohne Instruktionen etc. kopiert: https://www.soscisurvey.de/studyhagen/?act=8kCn6ptbVTU3P6h6RBNSO57i

Bisher habe ich es nur auf Mac mit Safari getestet, aber da habe ich schon folgendes Problem: Manchmal ist keine Auswahl möglich und das Bild bleibt einfach grau. Ich habe auch nur die beiden Rechtecke als Auswahlfelder definiert.

Die Erhebung soll per Mail an Versuchspersonen eines Pools ausgeschickt werden; also verschiedene technische Umgebungen. Gibt es hier irgendwelche Tipps um die Wahrscheinlichkeit zu erhöhen, dass die Auswahl dauerhaft funktioniert? Was könnte der Grund sein, dass es bei mir mit Safari nur ab und zu funktioniert (durchaus 90% der Zeit, aber eben nicht immer)?

Vielen Dank vorab und beste Grüße

Answer 1

In Firefox unter Windows geht das Bild deutlich über den Bereich hinaus - und zwar weil in der SVG-Datei eine Größe von 1264x896 Pixeln notiert ist:

<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1264 896" height="896" width="1264" ...

Das wird bei der verwendeten Einbindung nicht automatisch skaliert. Meine Vermutung wäre, dass auch das andere beschriebene Problem damit zusammenhängt. Notieren Sie doch in der SVG-Datei testweise mal die verfügbare Breite (780 Pixel laut aktuell verwendetem Layout). Falls es dann noch Probleme gibt, müssten wir die SVG-Datei nochmal genauer ansehen.

Comments

Vielen Dank für die (wie immer) schnelle Antwort.

Das war ein wichtiger Hinweis. Safari hat es automatisch skaliert, sodass es zunächst richtig aussah. Jetzt sollte die SVG stimmen und auch in Firefox sieht es gut aus.

Ich habe es jetzt viele Male getestet. In Firefox hatte ich bisher kein Problem. In Safari ist es leider weiterhin so, dass die SVG Flächen nicht immer erkannt werden und es wie ein normales Bild dargestellt wird (also nichts wählbar).

Falls Sie noch eine weitere Idee haben, freue ich mich über Input.

---

> In Safari ist es leider weiterhin so, dass die SVG Flächen nicht immer erkannt werden

Seltsam, dass es manchmal funktioniert und manchmal nicht. Am selben Rechner, ja?

Wenn Sie das SVG einmal in einer "puristischen" Software wie InkScape öffnen oder wenn Sie den XML-Code im Browser (Inspektor) ansehen, dann sind dort einige Gruppen, die über die komplette Fläche reichen (z.B. "g10" und "g14").

Es kann durchaus sein, dass diese als Flächen in Konkurrenz zu der Fläche treten, welche Ihre auswählbaren Elemente enthält. Meine nächste Empfehlung wäre demnach, unnötige Elemente aus dem SVG zu entfernen.

---

So, jetzt hat es etwas länger bei mir gedauert. Ich habe einige verschiedene Dinge getestet. Fazit: Die These, dass es an konkurrierenden Flächen liegen könnte scheint recht wahrscheinlich zu sein. Wenn ich die Default SVGs nehme, bekomme ich keine Probleme.
Ich muss es noch an mehreren Macs mit Safari probieren. Es kann natürlich auch noch sein, dass es einfach ein Systemfehler bei mir am Gerät ist. Ich glaube jedenfalls, dass es kein Soscisurvey relevanter Fehler ist und eher an Safari liegt.

Danke nochmals für die Antworten. Eine weitere Frage habe ich noch, die bei diesem Projekt entstanden ist, aber ich mache dafür eine neue Frage auf, da es ein anderes Thema ist.

LG