Делаем объект изображения svg интерактивным с помощью onclick, избегая абсолютного позиционирования

Question

Я пытался изменить изображения на моем сайте с img до svg, меняя теги img на embed и object. Но реализация функции onclick, которая ранее содержалась в теге img, оказывается наиболее сложной.

Я обнаружил, что onclick не имел никакого эффекта при размещении внутри тега object или embed.

Итак, я сделал div исключительно для svg и поместил onclick в этот тег div. Но без эффекта, если посетитель не нажмет на края / отступы изображения.

Я читал о наложении div, но стараюсь не использовать absolute позиционирование или вообще указывать position.

Есть ли другой способ применить onclick к svg?

Кто-нибудь сталкивался с этой проблемой? Вопросы и предложения приветствуются.

Answer 1

Вы рассматривали использование свойства CSS z-index, чтобы сделать контейнер dev "сверху" svg? Поскольку div (предположительно) прозрачен, вы все равно увидите изображение точно так же, как и раньше.

Это, я полагаю, наилучший, не взломанный, намеченный способ решения вашей проблемы. z-index полезно только для элементов, которые имеют свойство position fixed, relative или, как вы слышали, absolute. Однако вам не нужно перемещать объект.

Например:

<style>
    .svgwrapper {
        position: relative;
        z-index: 1;
    }
</style>
<div class="svgwrapper" onClick="function();">
    <object src="blah" />
</div>

Для чего бы то ни было, было бы немного элегантнее и безопаснее вообще не использовать onClick, а вместо этого связывать событие click с помощью javascript. Впрочем, это еще одна проблема.