svg插入foreignObject无法响应事件

svg插入foreignObject无法响应事件

svg中可以通过foreignObject嵌入html,展示更丰富的样式。当需要给这中间的html绑定事件的时候，不管是使用委托和直接查询元素进行绑定的时候都无法生效。右键检查元素也检查不到具体的元素，直接定位到最外部的svg。

解决pointer-events

经排查是html中样式pointer-events导致

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill; /* SVG only */
pointer-events: visibleStroke; /* SVG only */
pointer-events: visible; /* SVG only */
pointer-events: painted; /* SVG only */
pointer-events: fill; /* SVG only */
pointer-events: stroke; /* SVG only */
pointer-events: all; /* SVG only */

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。

改成stroke就可以响应事件了

svgText = svgText
  .replace(/pointer-events:\s*none/g, 'pointer-events: all')
  .replace(/pointer-events/="none"/, 'pointer-events="stroke"')