svg 能够被点击，并且不干扰 YouTube答案

【问题标题】：Svg to be able to be clicked, and not interfere with the YouTubesvg 能够被点击，并且不干扰 YouTube
【发布时间】：2021-09-10 04:14:16
【问题描述】：

我的 svg 在 YouTube 上存在问题。

如果您将鼠标放在 svg 的右侧并单击，则视频不会打开，而是会带您返回上一页。

点击 svg 之间的空格，应该会打开 YouTube 视频，但它不会，而是将您带回上一页。

svg 之外的所有内容都应该是 YouTube。

只有红线内的区域应该是可点击的，将用户带到主页

pointer-events: none; 需要就位，否则会干扰 YouTube 视频。

使用问题：

svg.home {
 pointer-events: none;
}

虽然这适用于 svg 不干扰，它还禁止点击 svg。

如何解决这个问题？

我需要 svg 能够被点击，并且不干扰 YouTube。

https://jsfiddle.net/hwm8qtoz/1/

.home {
  position: absolute;
  top: calc(60% - 25px); /*25px is half the height of the svg*/
  left: 0px;
  width: 50px;
  height: 50px;
  fill: green;
  cursor: pointer;
}

【问题讨论】：

"单击 svg 之间的空间" 你是在说那个家庭 svg 图标中显示门的空间吗？您是说只有红线内的区域才可以点击将用户带到主页？
是的......在空间之间单击应该打开 youtube。 svg 之外的所有内容都应该是 YouTube ..“只有红线内的区域应该是可点击的，将用户带到主页”是的。

标签： javascript css svg

【解决方案1】：

因为 CSS 有一个盒子模式，而且一切都是盒子。所以整个房子都在一个盒子里，整个盒子都可以点击，或者整个盒子都不能点击。

可以通过两种方式解决

您可以将 Home SVG 分成多个 svg。例如3 部分 =（住宅屋顶 + 住宅左侧 + 住宅右侧）。排列这些 svg，使其看起来像房子，然后使这些 SVG 的父级可点击，从而将您带到上一页。
使用多个路径创建您的 SVG，并使每个路径都可单独点击（将用户带到上一页）。看到这个想法http://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps

【讨论】：