benutzerdefinierte onHover mit <figure> in SVG Element Mit

Question

möchte ich Hover-Effekt von here (Apollo) auf ein SVG-Element hinzugefügt werden (oder auf für sie als Hintergrund verwendet Muster), die durch andere Bibliothek (Stück Kuchen Menü aus wheelnav.js erzeugt wurde). Allerdings verwendet es eine Abbildung Klasse und ich weiß nicht, wie das auf Svg zu implementieren.

Hier ist der Javascript-Code, der erstellt und implementiert, dass die Hintergrundmuster:

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

Gibt es eine Möglichkeit, dies zu tun? (Muss nicht Abbildung Klasse verwenden, kann einige Geister Objekte vor diesem Element oder etwas Ähnliches sein)

Answer 1

Ok ich weiß nicht über Svg, aber ich denke, dass dieser Effekt mit reinem CSS sowie ohne erzielt werden kann jede Programmierung. Sie können dazu die Eigenschaften translate und transition von css3 verwenden. Hier ist ein einfaches Beispiel.

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

Hope this Sie die Idee geben, mit zu arbeiten.