html - 为什么 svg referencing an element with clip-path not work?

Question

在实现 SVG Sprite 时，<svg>创建元素并通过 <use> 引用 svg 元素元素。含 <svg>然后使用 style="display: none;" 隐藏元素

clip-Path 属性不呈现，但路径呈现。这让我的道路看起来与我想要的不同。

我如何使用 svg <use xlink:href="#"/>引用带有剪辑路径的元素？

我使用 grunt-svg-store 来创建我的 svg sprite，但已将此示例简化为问答格式 https://css-tricks.com/svg-sprites-use-better-icon-fonts/

<svg id="svg-test" style="display: none;">
  <clipPath id="my-clip-1">
    <circle id="circle-1" cx="50" cy="50" r="50" />
  </clipPath>
  <path id="svg-test-reference" clip-path="url(#my-clip-1)" d="M10-39.288h80v80H10z" />
</svg>

<!-- Reference SVG <path> by ID with Use -->

<svg class="svg-item" viewBox="0 0 100 100">
  <use xlink:href="#svg-test-reference" />
</svg>

Live example on Codepen.io

Answer 1

使用 <svg style="width:0; height:0;">而不是 <svg style="display: none;">隐藏 Sprite 。

<!-- SVG element  -->

<svg id="svg-test" style="width:0; height:0;">
  <clipPath id="my-clip-1">
    <circle id="circle-1" cx="50" cy="50" r="50" />
  </clipPath>
  <path id="svg-test-reference" clip-path="url(#my-clip-1)" d="M10-39.288h80v80H10z" />
</svg>

<!-- Reference SVG <path> by ID with Use -->

<svg class="svg-item" viewBox="0 0 100 100">
  <use xlink:href="#svg-test-reference" />
</svg>

Live example on Codepen.io