Question

为什么每次触摸或单击xlink后面的区域时都会出现浅色矩形背景？

这是我的SVG代码：

<svg version="1.1" viewBox="0 0 147.86 258.44" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g class="bglyr" fill="none" transform="translate(-30.575,-20.926)">
<a xlink:href="https://google.com">
<path id="link1" fill="none" onmouseover="change(this)" onmouseout="unchange(this)" d="m104.43 242.44 11.742 6.1664 57.094 29.884-137.62 0.0617z" />                           
<a />
</g>
</svg>

JavaScript：

function change(item) {
    item.style.fill = "#42d46b";
    item.style.opacity = "1.0";
}
function unchange(item) {
    item.style.fill = "none";
    item.style.opacity = "0.0";
}

Answer 1

如果您的问题实际上是关于您的示例代码为何不起作用的问题，那么我可以为您解释一下。

如果您的<path>没有任何悬停内容，则不会触发鼠标事件。当fill为"none"或opacity为0时。没有鼠标事件将被触发。要解决此问题，请改用fill="transparent"。行为方式相同，但是会检测到，就好像它是其他任何不透明的填充色一样。

function change(item) {
    item.style.fill = "#42d46b";
}
function unchange(item) {
    item.style.fill = "transparent";
}

<svg version="1.1" viewBox="0 0 147.86 258.44" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g class="bglyr" fill="none" transform="translate(-30.575,-20.926)">
<a xlink:href="https://google.com">
<path id="link1" fill="transparent" onmouseover="change(this)" onmouseout="unchange(this)" d="m104.43 242.44 11.742 6.1664 57.094 29.884-137.62 0.0617z" />                           
</a>
</g>
</svg>

用SVG打断墙

1 个答案: