为什么svg <use xlink:href ="#"/>引用带剪辑路径的元素不起作用？

Question

实现SVG精灵时,<svg>会创建一个元素,并通过该<use>元素引用svg元素.<svg>然后使用隐藏包含元素style="display: none;"

clip-Path属性不会渲染,但路径会渲染.这使我的路径看起来与我想要的路径不同.

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

我使用grunt-svg-store来创建我的svg sprite,但是已经简化了Q&A格式的这个例子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>

Codepen.io上的实例

Answer 1

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

<!-- 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>

Codepen.io上的实例