交互式探索所有 pointer-events 属性值，理解事件穿透、SVG 特有行为与实际应用场景
pointer-events 属性定义元素在何种情况下可以成为鼠标事件的目标。以下是所有可用值：
默认值。元素正常响应鼠标事件，行为由浏览器决定。
元素永远不会成为鼠标事件的目标。事件会"穿透"到下层元素。
SVG 默认值。仅当 visibility 为 visible 且鼠标在填充区域（fill 非 none）或描边区域（stroke 非 none）上时响应。
仅当 visibility 为 visible 且鼠标在填充区域上时响应，不管 fill 是否设置。
仅当 visibility 为 visible 且鼠标在描边区域上时响应，不管 stroke 是否设置。
仅当 visibility 为 visible 时响应，不管 fill 和 stroke 的值。
鼠标在填充区域（fill 非 none）或描边区域（stroke 非 none）上时响应，不管 visibility。
鼠标在填充区域上时响应，不管 fill 和 visibility 的值。
鼠标在描边区域上时响应，不管 stroke 和 visibility 的值。
只要鼠标在填充或描边区域上就响应，不管 fill、stroke、visibility。
继承父元素的 pointer-events 值。
当上层元素设置 pointer-events: none 时，鼠标事件会穿透到下层元素。切换开关体验差异。
加载中...
不同 pointer-events 值下的 hover 行为差异。将鼠标悬停在各个卡片上观察效果。
点击按钮切换下方区域的 pointer-events 值：
SVG 元素拥有更多 pointer-events 值，可以精确控制填充区域和描边区域的事件响应。
仅 fill≠none 和 stroke≠none 的可见区域响应
填充区域始终响应（不管 fill 值）
描边区域始终响应（不管 stroke 值）
所有区域始终响应，无视一切
不管 visibility，绘制区域响应
元素完全忽略鼠标事件
多层叠加元素中，pointer-events 控制事件如何在层级间传递。点击不同层观察事件冒泡。
三个叠加的层，分别可以设置不同的 pointer-events 值：
选择 pointer-events 值，生成可直接使用的 CSS 代码，支持一键复制。
所有交互事件都会记录在这里。在页面上进行各种操作，观察事件触发情况。