Question

我想将here（Apollo）的悬停效果添加到生成的svg元素（或用作背景的模式）上通过不同的库（来自wheelnav.js的饼图菜单）。但是，它使用了一个figure类，我不知道如何在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);

有没有办法做到这一点？（没必要使用图类，可以在该元素前面的一些鬼对象或类似的东西）

Answer 1

好吧我不知道svg，但我认为这种效果可以使用纯css实现，无需任何编程。您可以使用css3的translate和transition属性来实现此目的。这是一个简单的样本。

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

希望这能让你有机会参与其中。

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

1 个答案: