在 SVG 元素中使用带有 <figure> 的自定义 onHover答案

【问题标题】：Using custom onHover with <figure> in SVG element在 SVG 元素中使用带有 <figure> 的自定义 onHover
【发布时间】：2017-08-09 17:47:44
【问题描述】：

我想将来自 here (Apollo) 的悬停效果添加到生成的 svg 元素（或用作背景的图案）上由不同的库（来自wheelnav.js 的馅饼菜单切片）。但是，它使用了一个图形类，我不知道如何在 svg 上实现它。

这是创建和实现该背景模式的 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);

有没有办法做到这一点？（不一定需要使用图形类，可以是该元素前面的一些幽灵对象或类似的东西）

【问题讨论】：

标签： javascript jquery css svg figure

【解决方案1】：

好吧，我不了解 svg，但我认为这种效果也可以使用纯 css 实现，无需任何编程。您可以使用 css3 的 translate 和 transition 属性来实现这一点。这是一个简单的示例。

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

希望这能给您带来工作的想法。

【讨论】：

很遗憾，我无法将 div 添加到 svg。它必须是钱包 css，仅使用已创建的单个元素。