StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POSVG embed bug in Safari forces me to look for another option
text
Body
copied!<p>I'm building an interactive website for a touchscreen, which runs the latest version of Google Chrome. The user has to tap on, in this case, a series of buildings to get more information about it. The idea is to absolute position hyperlinks and place them on top of the buildings, which are combined in a single background image. But as you can see below, the problem is that some hyperlinks overlap. The chance that the user taps on the wrong building without knowing, is quite large.</p> <p>Because I already have the vector masks of each building, I thought it would be a good idea to not use hyperlinks, but use SVG files instead. SVG files support a tag called xlink, which you can use to make a vector object linkable. The clickable area which links to another file is not a square anymore, but has the same shape as the vector mask. So just like I did with the hyperlinks, I placed them on top of the buildings. This works fine in Firefox, but not in Chrome nor Safari! Apparently there's a bug in Webkit (bugs.webkit.org/show_bug.cgi?id=22986) which causes the browser to always show a white background and which neglects the shape of the vector object, so it's rendered as a square object.</p> <p><a href="http://i.stack.imgur.com/Pp6vE.png" rel="nofollow"><strong>Screenshot:</strong> Overlapping hyperlinks and Webkti SVG Bug</a></p> <p><em>Normally the opacity of the SVG embed would be set to zero, but to show you what's going wrong I've set it to 1.</em></p> <p>Using Firefox instead is not an option. And the area-tag in HTML takes too much time. So I'm stuck. <strong>Does anyone know another solution for this particular problem?</strong></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload