如何在锚标签与div用display:contents时实现SVG对象可点击？

你的核心问题出在.svg-container的pointer-events: none设置上——这个属性会直接阻止SVG容器响应任何点击事件，而设置了display: contents的<a>和.svg-wrapper本身不会生成布局盒模型，没法直接承接点击事件，自然就触发不了锚点跳转。

只需要修改CSS，移除.svg-container的pointer-events: none即可：

.component-content{
      display: flex;
      overflow: hidden;
}
a{
      display: contents;
}
.svg-wrapper{
  display: contents;
}
.svg-container{
    height: auto;
    align-self: start;
    padding: 0 19px 0 0;
    max-width: 50%;
    /* 移除pointer-events: none，默认pointer-events为auto，可正常响应点击 */
}

原理说明： #

display: contents的元素不会渲染自身的盒模型，但依然会参与事件冒泡流程。当内部的SVG容器允许接收指针事件后，点击SVG时，事件会冒泡到上层的<a>标签，从而触发锚点的跳转行为，完全满足你保留display: contents的需求。

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