时间戳

首页 > 解决方案 > 如何使 SVG 元素不可见但仍对 onMouseUp 作出反应

html - 如何使 SVG 元素不可见但仍对 onMouseUp 作出反应

问题描述

当用户单击它时，我想隐藏一个 svg 组。如果用户单击 svg-group 在隐藏之前所在的位置（它应该仍然存在，您只是看不到它），那么它应该重新出现。我必须使用哪个 css 属性来实现这一点？或者是onmouseup错误的属性？

我尝试使用visibility: hidden，display: none但两者都不起作用。

这是我的svg：

<g onmouseup="fnClickedSVGGroup(this)">
    <rect x="0" y="0" width="10" height="10"/>
    <text x="5" y="5">Click me!</text>
</g>

标签： htmlcsssvg

解决方案

只要您还相应地设置了指针事件属性，您就可以使用可见性：隐藏。

您不能使用 display:none ，因为这会导致元素根本不存在。

<svg>
<g visibility="hidden" pointer-events="all" onmouseup="alert('hi')">
    <rect x="0" y="0" width="10" height="10"/>
    <text x="5" y="5">Click me!</text>
</g>
</svg>

推荐阅读