Создание объекта изображения SVG, активируемого по щелчку с onclick, предотвращение абсолютного расположения

Question

Создание объекта изображения SVG, активируемого по щелчку с onclick, предотвращение абсолютного расположения

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

Я нашел onclick имеемый никакой эффект при размещении в object или embed тег.

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

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

Там другой путь состоит в том, чтобы применить onclick к svg?

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

52

html css svg

задан Rui Jarimba 23 March 2013 в 13:05

3 ответа

Другие вопросы по тегам:

html css svg

Похожие вопросы:

score 0 · Answer 1

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

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

Например:

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

Как бы то ни было, было бы немного более элегантно и безопасно вообще не использовать onClick, а вместо этого привязать событие щелчка с помощью javascript. Но это совсем другая проблема.

score 0 · Answer 2

Предполагая, что вам не нужна кроссбраузерная поддержка (что невозможно без плагина для IE), вы пробовали использовать svg в качестве фонового изображения?

Экспериментальная вещь, конечно, но я подумал, что должен упомянуть об этом.

score 4 · Answer 3

У меня это работает в последних версиях Firefox, Chrome, Safari и Opera.

Он полагается на прозрачный div перед объектом, который имеет абсолютную позицию и задает ширину и высоту, чтобы он перекрывал тег объекта ниже.

Вот он, я немного поленился и использовал встроенные стили:

<div id="toolbar" style="width: 600px; height: 100px; position: absolute; z-index: 1;"></div>
<object data="interface.svg" width="600" height="100" type="image/svg+xml">
</object>

Я использовал следующий JavaScript, чтобы связать с ним событие:

<script type="text/javascript">
    var toolbar = document.getElementById("toolbar");
    toolbar.onclick = function (e) {
        alert("Hello");
    };
</script>