Hallo,
ich benutze den Fragentyp "SVG als Auswahl (einfache Auswahl)", um eine Eingabe von Uhrzeiten über das SVG zu ermöglichen. Ich benutze hierfür aber ein eigenes SVG.
Das SVG wird zunächst innerhalb des Fragebogens korrekt dargestellt. Beim Hovern über Eingabefelder verändert sich auch die Füllfarbe der Felder wie gewünscht.
Das Problem: wenn ich ein Feld auswähle, möchte ich ebenfalls die Füllfarbe des Felds sowie die Textfarbe ändern. Ich habe habe im SVG und im HTML des Layouts verschiedene CSS-Elemente ausprobiert, jedoch ohne Erfolg.
Den Style meines SVGs sowie ein Beispiel-Feld des SVGs habe ich beigefügt.
Vielen Dank
.time-field {
cursor: pointer;
}
.time-field circle,
.time-field text {
transition: fill 0.2s ease, stroke 0.2s ease;
}
.time-field:hover circle {
fill: #9e8cc7;
stroke: #9e8cc7;
}
.time-field:hover text {
fill: #FFFFFF;
}
SVG-Feld:
<g id="time-12-00" class="time-field" pointer-events="all">
<circle cx="200" cy="85" r="18" fill="transparent" stroke="#E6EAF2" stroke-width="2" />
<text x="200" y="85" dy="0.35em" fill="#E6EAF2">12</text>
</g>