SVG нажмите нижний объект вниз

Question

Я создал SVG изображения с Inkscape которые встроены в SharePoint Вики-страница Я регулярно использую эти два атрибута в Inkscape (Свойства объекта -> Интерактивность):

onmouseover: this.style.opacity=0

onmouseout: this.style.opacity=1

Это позволяет скрыть объект сверху, чтобы показать другой объект, который я поместил позади.

С использованием onclick атрибут, есть ли способ опустить объект сверху на фон? Что-то вроде onclick: this.object.lower...

Answer 1

Под понятием вы подразумеваете перемещение своей позиции на странице? Или меняете слой страницы, на котором показано изображение? Учитывая пример OnMouseOver, я предполагаю последний. Вам не нужно использовать onclick для этого вообще. Установите изображение SVG, которое должно быть "позади", в качестве фона родительского div. Затем установите передний план с background-color и background-image:url('путь / к /my.svg').

<style>
.backgroundImage, .foregroundImage {height:5em;width:5em;}
.backgroundImage {background:url('../img/logo.png') #fff center center no-repeat; background-size:4em 4em;}
.foregroundImage {background:url('../img/logo.png') red center center no-repeat; background-size:1em 1em;}
.foregroundImage:hover {background:none;}
</style>
<div class="backgroundImage"><div class="foregroundImage"></div></div>

Пример того, как это сделать, вы можете увидеть здесь, в этом jsFiddle - у меня не было удобных изображений, поэтому я просто использовал их логотип для фоновых URL-адресов.