如何在SVG背景图中复用带href的嵌套元素？

失败原因 #

你之前尝试把多个<use>封装到<use id="quadrant">里再复用的方式完全无效，核心原因是SVG规范的限制：

• <use>元素本身是引用已有元素的副本容器，它内部的内容会被放入影子DOM，不属于SVG主DOM树的可引用节点，因此外部无法通过href="#quadrant"引用它内部的分组内容。
• <use>不能作为被引用的“模板元素”——只有直接定义在<defs>或SVG根节点下的元素（如<path>、<g>、<symbol>）才能通过ID被<use>引用。

可行解决方案 #

针对你的需求（分组复用<use>元素、自包含、支持background-image场景），有两种直接可行的方案：

方案1：用<defs>中的<g>分组复用 #

<g>虽然自身不支持href属性，但可以被<use>直接引用——只要把分组好的<use>元素放到<defs>内的<g>里，并给<g>分配ID，后续就能通过<use href="#分组ID">复用整个分组。

示例代码：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <!-- 定义基础可复用路径 -->
    <path id="main_path" d="M0 0 L20 0 L20 10 L0 10 Z" fill="#ccc" />
    
    <!-- 定义左上象限分组 -->
    <g id="quadrant-top-left">
      <use href="#main_path" />
      <use href="#main_path" transform="translate(20, 0) rotate(90)" />
    </g>
    
    <!-- 定义右上象限分组（可基于左上变换） -->
    <g id="quadrant-top-right">
      <use href="#quadrant-top-left" transform="translate(160, 0) scale(-1, 1)" />
    </g>
    
    <!-- 其他象限分组同理 -->
    <g id="quadrant-bottom-left">
      <use href="#quadrant-top-left" transform="translate(0, 160) scale(1, -1)" />
    </g>
    <g id="quadrant-bottom-right">
      <use href="#quadrant-top-left" transform="translate(160, 160) scale(-1, -1)" />
    </g>
  </defs>
  
  <!-- 复用四个象限分组 -->
  <use href="#quadrant-top-left" />
  <use href="#quadrant-top-right" />
  <use href="#quadrant-bottom-left" />
  <use href="#quadrant-bottom-right" />
</svg>

这个方案完全符合自包含要求，background-image引用时可以正常渲染，同时大幅提升了代码的可读性——你可以在<defs>里维护每个象限的结构，主渲染区只需要引用四个分组即可。

方案2：用<symbol>实现更灵活的复用 #

如果需要更灵活的参数化调整（比如不同象限的尺寸、视口适配），可以用<symbol>标签替代<g>。<symbol>是SVG专门为可复用模板设计的元素，支持viewBox属性，能独立定义视口，避免变换冲突。

示例代码：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <path id="main_path" d="M0 0 L20 0 L20 10 L0 10 Z" fill="#ccc" />
    
    <!-- 定义通用象限模板 -->
    <symbol id="quadrant" viewBox="0 0 40 40">
      <use href="#main_path" />
      <use href="#main_path" transform="translate(20, 0) rotate(90)" />
    </symbol>
  </defs>
  
  <!-- 复用模板并通过transform/位置属性调整象限 -->
  <use href="#quadrant" x="0" y="0" width="40" height="40" />
  <use href="#quadrant" x="160" y="0" width="40" height="40" transform="scale(-1, 1)" />
  <use href="#quadrant" x="0" y="160" width="40" height="40" transform="scale(1, -1)" />
  <use href="#quadrant" x="160" y="160" width="40" height="40" transform="scale(-1, -1)" />
</svg>

这个方案的优势是模板更通用，你可以通过<use>的x/y/width/height属性快速调整每个象限的位置和尺寸，适合需要批量调整的场景。

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