SVG onclick底部對象

我創建了SVG圖像0嵌入在SharePoint Wiki頁面。SVG onclick底部對象

onmouseover: this.style.opacity=0 

onmouseout: this.style.opacity=1

這使得隱藏在頂部的對象，以揭示另一個對象我放在後面： - 我內Inkscape（>交互對象屬性）經常使用這兩個屬性。

使用onclick屬性，有沒有辦法將對象頂部放到背景上？類似於onclick: this.object.lower...

來源

2017-03-16 Thierry

你不得不動文件中的元素早於包含它的元素。 –

下面的意思是移動它在頁面上的位置？或者改變圖像顯示的頁面的哪一層？鑑於OnMouseOver的例子，我猜測後者。你根本不需要使用onclick。將SVG圖像設置爲「後面」作爲父div的背景。然後用background-color和background-image：url（'path/to/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 -I沒有任何方便的圖像，所以我只是用他們的標誌爲背景的URL

來源

2017-03-17 07:13:17 Maarten

感謝您的回答。我需要在Inkscape中執行這樣的操作，因爲SharePoint 2013不理解SVG：我必須將SVG代碼插入到腳本編輯器Web部件中。 – Thierry

SharePoint 2013支持SVG就好了，將SVG保存爲.svg文件並像圖像一樣引用它。 – Maarten

SVG onclick底部對象

回答

相關問題