Я создаю интерактивный веб-сайт для сенсорного экрана, на котором установлена последняя версия Google Chrome. В этом случае пользователь должен нажать на ряд зданий, чтобы получить больше информации о нем. Идея состоит в том, чтобы размещать гиперссылки и размещать их поверх зданий, которые объединены в одно фоновое изображение. Но, как вы можете видеть ниже, проблема в том, что некоторые гиперссылки перекрываются. Вероятность того, что пользователь нажмет не на то здание, не зная, довольно велика.
Поскольку у меня уже есть векторные маски каждого здания, я подумал, что было бы неплохо не использовать гиперссылки, а вместо этого использовать файлы SVG. SVG-файлы поддерживают тег под названием xlink, который можно использовать для связывания векторного объекта. Кликабельная область, которая ссылается на другой файл, больше не является квадратом, но имеет ту же форму, что и векторная маска. Так же, как я сделал с гиперссылками, я разместил их поверх зданий. Это отлично работает в Firefox, но не в Chrome и не в Safari! Очевидно, в Webkit есть ошибка (bugs.webkit.org/show_bug.cgi?id=22986), из-за которой браузер всегда показывает белый фон и игнорирует форму векторного объекта, поэтому он отображается как квадратный объект.
Снимок экрана: Перекрывающиеся гиперссылки и ошибка Webkti SVG
Обычно непрозрачность встраивания SVG устанавливается на ноль, но чтобы показать вам, что происходит не так, я установил ее на 1.
Использование Firefox вместо этого не вариант. А тег HTML в HTML занимает слишком много времени. Так что я застрял. Кто-нибудь знает другое решение для этой конкретной проблемы?