SVG将下部对象单击到底部

我用

Inkscape

创建了

SVG

图像，这些图像嵌入到

SharePoint

Wiki页面中。我经常在

Inkscape

中使用这两个属性（对象属性->交互性）：

这允许在顶部隐藏对象，以便显示我放置在后面的另一个对象

---

使用

onclick

属性，是否有办法将顶部的对象降低到背景上？类似于

onclick:this.object.lower…

的意思是移动它在页面上的位置吗？或者更改图像显示在页面的哪一层？鉴于OnMouseOver的例子，我猜是后者。您根本不需要使用onclick。将假定为“后面”的SVG图像设置为父div的背景。然后将最前面的图像设置为背景颜色和背景图像：url（'path/to/my.SVG'）

.backgroundImage、.ForeggroundImage{高度：5em；宽度：5em；}
.backgroundImage{background:url（'../img/logo.png'）#fff中心不重复；背景大小：4em 4em；}
.foregroundImage{背景：url（'../img/logo.png'）红色中心不重复；背景大小：1em 1em；}
.foregroundImage:悬停{背景：无；}

---

你可以在这里看到一个具体的例子，说明如何做到这一点-我没有任何方便的图像，所以我只是将它们的徽标用作背景URL的

。你必须将元素移动到文件中比覆盖它的元素更早的位置。谢谢你的回答。我需要在Inkscape中执行这样的操作，因为SharePoint 2013不理解SVG：我必须在脚本编辑器Web部件中插入SVG代码。SharePoint 2013非常支持SVG，将SVG保存到.SVG文件并像图像一样引用它。

onmouseover: this.style.opacity=0

onmouseout: this.style.opacity=1

<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>