5

在实现 SVG sprite 时，<svg>会创建一个元素并通过该元素引用 svg 元素<use>。然后使用隐藏包含<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>

Codepen.io 上的实时示例

4

2 回答 2

7

使用<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 上的实时示例

于 2015-05-01T19:33:25.913 回答
1

在我的情况下，仅使用“宽度”和“高度”等于零，留下了应该是图像的空白区域。但是，使用display:content; 替代display:none;效果很好，没有空白区域也没有图像。

于 2018-09-28T17:03:48.210 回答