Javascript 导致仅在svg中png的不透明部分悬停_Javascript_Html_Css_Svg

Javascript 导致仅在svg中png的不透明部分悬停

javascript html css svg

Javascript 导致仅在svg中png的不透明部分悬停,javascript,html,css,svg,Javascript,Html,Css,Svg,在我当前的项目中，我需要在SVG中绘制动态加载的png（因此它们无法准备…）图像。并且需要在其上添加悬停效果，这仅在图像的不透明部分悬停时才起作用。我发现了一个非常古老的问题，但它只建议对png使用地图标签，我无法准备它们。另一部分是在我的情况下，我需要在SVG中呈现它们。所以我的问题是，使用一些SVG功能，或者有其他方法用JavaScript来模拟它，这是可能的吗现在它呈现为这样 <svg class="svg-img" viewBox="0 0 290

在我当前的项目中，我需要在SVG中绘制动态加载的png（因此它们无法准备…）图像。并且需要在其上添加悬停效果，这仅在图像的不透明部分悬停时才起作用。我发现了一个非常古老的问题，但它只建议对png使用地图标签，我无法准备它们。另一部分是在我的情况下，我需要在SVG中呈现它们。所以我的问题是，使用一些SVG功能，或者有其他方法用JavaScript来模拟它，这是可能的吗

现在它呈现为这样

<svg class="svg-img" viewBox="0 0 2901 1639" preserveAspectRatio="xMidYMid">
    <image xlink:href="./images/dynamically/loaded.png" x="100" y="500" width="200" height="400">
    </image>
</svg>

谢谢大家!

您可以将图像复制到画布上，然后查看画布像素，您可以在png顶部的svg中添加一个透明多边形，其中包含不透明部分的大致形状。我会这样做的