CSS pointer-events 属性

设置元素是否对鼠标事件做出反应

svg 的 pointer-events 和其它元素的 pointer-events 有区别吗？

SVG 元素的 pointer-events 属性与其他元素的 pointer-events 属性在某些方面上有一些区别。

1. 区别于HTML元素：SVG 元素的 pointer-events 属性可以应用于包括图形、路径、文本等在内的 SVG 元素，而 HTML 元素的 pointer-events 属性主要应用于可交互的 HTML 元素，如按钮、链接等。因此，它们适用的元素类型有所不同。

2. SVG 图形事件：对于 SVG 元素，pointer-events 属性决定了它们是否接收和响应鼠标或触摸事件。具体取值有以下几种：

   • pointer-events: auto;：默认值。SVG 元素可以接收和处理鼠标或触摸事件。
   • pointer-events: none;：SVG 元素不接收鼠标或触摸事件，事件可以穿透到下方的元素。
   • pointer-events: visiblePainted;：SVG 元素只在可见部分接收事件。
   • pointer-events: visibleFill;：SVG 元素只在填充区域接收事件。
   • pointer-events: visibleStroke;：SVG 元素只在描边区域接收事件。

3. HTML 元素事件：对于大多数 HTML 元素，pointer-events 属性也控制它们是否接收和响应鼠标或触摸事件，但取值略有不同。常见的取值有：

   • pointer-events: auto;：默认值。HTML 元素可以接收和处理鼠标或触摸事件。
   • pointer-events: none;：HTML 元素不接收鼠标或触摸事件，事件可以穿透到下方的元素。

总的来说，SVG 元素的 pointer-events 属性提供了更多的取值选项，并对图形、路径等进行更精细的控制。而 HTML 元素的 pointer-events 属性则主要用于判断元素是否接收鼠标或触摸事件。