如何正确引用含<clipPath>的<symbol>到<use>元素中？

问题的核心原因是：<use> 元素引用 <symbol> 时会创建影子DOM，<symbol> 内部定义的 <clipPath> 会被隔离在影子DOM中，而SVG的clip-path属性默认基于主文档的DOM上下文解析ID，导致形状找不到对应的裁剪路径，最终显示全金色星星。

下面是两种可靠的解决方法：

方法一：将ClipPath放在全局Defs中（推荐） #

把所有需要的<clipPath>统一放在隐藏SVG的<defs>标签下（而非<symbol>内部），让它成为全局可访问的资源，之后在<symbol>里的形状直接引用这个全局ID即可。这样无需重复定义裁剪路径，所有<use>引用都能正常生效。

示例代码：

<!-- 全局隐藏的SVG图标库 -->
<svg style="display: none;">
  <defs>
    <!-- 全局裁剪路径：裁剪星星右半部分 -->
    <clipPath id="clip-half-star">
      <rect x="10" y="0" width="10" height="20" />
    </clipPath>
  </defs>

  <!-- 半金色星星图标 -->
  <symbol id="icon-half-gold-star" viewBox="0 0 20 20">
    <path 
      d="M10 0L12.3 7.2L20 7.8L14.1 12.5L15.8 20L10 16.3L4.2 20L5.9 12.5L0 7.8L7.7 7.2Z" 
      fill="#ffd700" 
      clip-path="url(#clip-half-star)"
    />
  </symbol>
</svg>

<!-- 引用图标 -->
<svg width="24" height="24">
  <use href="#icon-half-gold-star" />
</svg>

方法二：在Symbol内部使用相对引用（兼容性稍差） #

如果需要把裁剪路径和图标绑定在一起，可以将<clipPath>放在<symbol>内部，同时确保clip-path引用的是当前影子DOM内的ID。这种方式依赖浏览器对影子DOM内ID解析的支持，部分旧浏览器可能存在问题。

示例代码：

<svg style="display: none;">
  <symbol id="icon-half-gold-star" viewBox="0 0 20 20">
    <defs>
      <clipPath id="internal-clip-half-star">
        <rect x="10" y="0" width="10" height="20" />
      </clipPath>
    </defs>
    <path 
      d="M10 0L12.3 7.2L20 7.8L14.1 12.5L15.8 20L10 16.3L4.2 20L5.9 12.5L0 7.8L7.7 7.2Z" 
      fill="#ffd700" 
      clip-path="url(#internal-clip-half-star)"
    />
  </symbol>
</svg>

<!-- 引用图标 -->
<svg width="24" height="24">
  <use href="#icon-half-gold-star" />
</svg>

注意：如果用方法二，要确保每个<symbol>内部的<clipPath>ID唯一，避免全局ID冲突。

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