定製onHover選項與<figure>

我想從here（阿波羅）添加懸停效果到SVG元素（或到作爲背景它圖案），通過不同的庫（從wheelnav.js餅形菜單的切片生成）。但是，它使用了一個圖形類，我不知道如何將它實現到svg上。定製onHover選項與<figure>

下面是創建並實現了背景圖案的JavaScript代碼：

var patt = document.createElementNS('http://www.w3.org/2000/svg', 'pattern'); 
patt.setAttribute('id', 'img1'); 
patt.setAttribute('patternUnits', 'objectBoundingBox'); 
patt.setAttribute('width', '1'); 
patt.setAttribute('height', '1'); 
patt.setAttribute('x', '0'); 
patt.setAttribute('y', '0'); 

var image = document.createElementNS('http://www.w3.org/2000/svg', 'image'); 
image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'assets/images/isaac-easy-mode.jpg'); 
image.setAttribute('width', document.getElementById("wheelnav-piemenu" + 3 + "-slice-" + 0).getBoundingClientRect().width); 
image.setAttribute('height', document.getElementById("wheelnav-piemenu" + 3 + "-slice-" + 0).getBoundingClientRect().height); 

var defs = document.getElementsByTagName('defs')[0]; 

patt.appendChild(image); 
defs.appendChild(patt);

有沒有辦法做到這一點？（不需要使用圖形類，可以在該元素或類似的東西前面的一些幽靈對象）

來源

2017-08-09 Filmos

好吧，我不知道svg，但我認爲這種效果可以使用純CSS來實現，而且沒有任何編程。您可以使用css3的translate和transition屬性來實現此目的。這是一個簡單的例子。

https://codepen.io/Nasir_T/pen/KvmevJ

希望這會給你的想法與合作。

來源

2017-08-09 18:21:03

不幸的是，我無法將div添加到svg。這將不得不使用只有那個已經創建的單個元素錢包css。 – Filmos

定製onHover選項與<figure>

回答

相關問題