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

Answer 1

正如 enxaneta 评论的那样：

• 更喜欢通过绝对定位隐藏 SVG 内联资源，如下所示：
  

  style="position:absolute;height:0;width:0;"

  您还可以添加 ARIA 属性，例如

  aria-hidden="true"

• 避免不必要的转换：它们会使你的代码相当难以维护

此外，您可能不需要 SVG

<clipPath>

定义来进行简单的矩形剪辑 – CSS 剪辑路径 属性（如

clip-path:inset()

）也可以做到这一点。

<svg viewBox="0 0 19.783 20">
  <use href="#icon-half-star" />
</svg>

<svg style="position:absolute;height:0;width:0;" aria-hidden="true">
    <symbol width="19.783" height="20" viewBox="0 0 19.783 20" id="icon-half-star" role="img" aria-labelledby="icon-half-star-title">
        <title id="icon-half-star-title">Half a star</title>
        <defs>
           <path id="star_shape" d="M19.73 7.8a1 1 0 00-.85-.69l-5.43-.49-2.14-5.02a1 1 0 00-1.84 0l-2.14 5.02-5.42 .5a1 1 0 00-.57 1.74l4.1 3.6-1.21 5.32a1 1 0 001.49 1.08l4.67-2.8 4.68 2.8a1 1 0 001.48-1.08l-1.2-5.33 4.1-3.59a1 1 0 00.28-1.06"/>
        </defs>
      <!-- background star -->
      <use href="#star_shape" fill="#f0f0f0"/>
      <!-- star half-filled -->
      <use href="#star_shape" fill="#f4ba1c" style="clip-path:inset(0 50% 0% 0)"/>
    </symbol>
</svg>