I've spent about a week looking for a solution to a problem I'm not even sure is addressable. I'll describe it:
I'm working on an application for a mobile device that uses SVG and I'm stuck on a particular problem.
When a user rolls over ("focusin") on a particular element (calendar icon) the device automatically displays their upcoming calendar events above. However, the upcoming calendar events are using white text and can be difficult to see, so I'd like to add a background image behind the text to make it easier to see. This way, the second the user highlights ("focusin") the calendar icon below, the background image shows up at the same time as the calendar events.
Right now I have it set up so that when the calendar information is present, if the user scrolls up to select one of the calendar list items (hotspot1) the background image (#calendarbackground) appears using this code:
<set xlink:href="#calendarbackground" attributeName="display" to="inline" begin="today_text1hotspot.focusin"/>
This of course means that when the text first appears, it has no background until the user scrolls up and focuses in on the first text element. I would prefer the #calendarbackground image to appear when the text hotspot1 is "inline", that is, visible to the user.
Something like this:
<set xlink:href="#calendarbackground" attributeName="display" to="inline" begin="today_text1hotspot.display:inline"/>
Of course, the "begin="today_text1hotspot.display:inline" code doesn't actually work, but I'm wondering if there is a way to "begin" something without using focusin, focusout, or activate, which as I understand are the only three real options.
I'm at my wits end with this one, and I just can't commit any more time to it unless I know such a thing is even possible.
Thanks for any input you can provide.
Cheers!