为什么 svg <use xlink:href="#"/> 引用带有 clip-path 的元素不起作用？

Question

实现 SVG 精灵时，会创建一个 <svg> 元素，并通过 <use> 元素引用 svg 元素。然后使用 style="display: none;"

隐藏包含 <svg> 的元素

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;"> 来隐藏精灵。

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

Answer 2

在我的例子中，仅使用 "width" 和 "height" 等于零，在应该是图像的地方留下了空白区域。但是，使用 display:content; 而不是 display:none; 效果很好，没有空白区域，也没有图像。

为什么 svg <use xlink:href="#"/> 引用带有 clip-path 的元素不起作用？

Why does svg <use xlink:href="#"/> referencing an element with clip-path not work?

html

css

svg

clip-path

grunt-svgstore