如何将内嵌图片的SVG设置为可触发交互的整体可选中项

当前仅SVG边框可触发交互的核心原因是：你定义的路径仅配置了金色描边、无填充属性，内部被裁剪的图片区域没有可承接交互事件的有效触发区域，hover到图片时事件无法被捕获。

方案1：新增透明填充触发层（最推荐） #

在SVG内部追加一个和轮廓完全一致的路径，设置为透明填充，专门用来承接交互事件，完全不影响原有视觉效果，适配所有地图组件场景。
修改后的完整SVG代码如下：

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="85.000000pt" viewBox="0 0 850 1090" preserveAspectRatio="xMidYMid meet">
  <clipPath id="clip">
    <path id="path" transform="translate(0,1090) scale(1,-1)" d="M406 1035 c-32 -49 -201 -104 -323 -105 l-43 0 0 -282 c0 -277 1
    -284 24 -333 39 -82 146 -174 291 -250 l67 -34 61 31 c151 76 265 170 303 253
    23 49 24 57 24 330 l0 281 -103 12 c-124 13 -206 42 -252 87 l-33 34 -16 -24z" />
  </clipPath>
  <image x="-200" y="30" width="1090" height="1090" clip-path="url(#clip)" xlink:href="https://assets.codepen.io/222579/darwin300.jpg" />
  <use xlink:href="#path" fill="none" stroke="gold" stroke-width="30" />
  <!-- 新增透明触发层 -->
  <use xlink:href="#path" fill="transparent" stroke="none" pointer-events="all" />
</svg>

方案2：调整全局pointer-events属性 #

如果不想额外加元素，可以直接给SVG根元素添加pointer-events="all"属性，让整个SVG的可见区域都响应交互：

<svg version="1.0" pointer-events="all" xmlns="http://www.w3.org/2000/svg" width="85.000000pt" viewBox="0 0 850 1090" preserveAspectRatio="xMidYMid meet">
  <!-- 原有内部代码不变 -->
</svg>

注意该方案在部分地图框架下可能出现事件透传、误触发相邻标记交互的问题，优先选择方案1。

内容的提问来源于stack exchange，提问作者Jay Modi