如何组织SVG以实现视图框hover效果及DOM可点击事件访问？

方案一：内联SVG（推荐） #

直接把SVG代码写入HTML中，通过添加透明覆盖矩形捕获整个viewbox的hover和点击事件：

1. 编写内联SVG结构
   添加覆盖整个viewbox的透明<rect>，用于接收hover和点击事件，放在SVG内容的最上层（或最底层，确保能捕获鼠标交互即可）：

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 透明覆盖层：捕获整个viewbox的鼠标交互 -->
  <rect id="svg-interactive-overlay" width="100%" height="100%" fill-opacity="0" />
  <!-- 你的SVG内容，统一加类方便样式控制 -->
  <circle class="svg-content" cx="50" cy="50" r="40" fill="#2ecc71" />
  <path class="svg-content" d="M20 80 L80 80" stroke="#3498db" stroke-width="2" />
</svg>

2. 添加hover样式
   通过CSS选择器，利用覆盖层的hover状态控制SVG内容的样式：

/* 鼠标悬停在覆盖层时，修改所有SVG内容元素的样式 */
#svg-interactive-overlay:hover ~ .svg-content {
  fill: #e74c3c;
  stroke: #f39c12;
}

3. 绑定点击事件
   直接给覆盖层添加点击事件，调用自定义函数：

// 原生JS
document.getElementById('svg-interactive-overlay').addEventListener('click', function() {
  yourCustomFunction(); // 替换为你的函数名
});

// jQuery版本
$('#svg-interactive-overlay').on('click', function() {
  yourCustomFunction();
});

方案二：外部SVG+<object>标签（适合复用SVG场景） #

如果必须用外部文件引入SVG，可在SVG内部添加交互逻辑，再通过<object>嵌入：

1. 修改外部SVG文件
   在外部SVG（如icon.svg）中添加透明覆盖层、hover样式和点击脚本：

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <style>
    #overlay:hover ~ .svg-content {
      fill: #e74c3c;
      stroke: #f39c12;
    }
  </style>
  <!-- 透明覆盖层 -->
  <rect id="overlay" width="100%" height="100%" fill-opacity="0" />
  <!-- SVG内容 -->
  <circle class="svg-content" cx="50" cy="50" r="40" fill="#2ecc71" />
  <!-- 点击事件脚本，通过parent访问父页面函数 -->
  <script type="text/javascript">
    document.getElementById('overlay').addEventListener('click', function() {
      parent.yourCustomFunction(); // 父页面定义的函数
    });
  </script>
</svg>

2. 页面中嵌入SVG
   用<object>标签引入外部SVG：

<object data="icon.svg" type="image/svg+xml"></object>

注意：此方案要求SVG文件与页面同域，否则会存在跨域脚本访问限制。

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