Question

实现SVG精灵时，会创建<svg>元素，并通过<use>元素引用svg元素。然后使用<svg>

隐藏包含style="display: none;"元素

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

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

我使用grunt-svg-store来创建我的svg精灵，但是为Q＆amp; 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>

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

在我的情况下，仅使用“宽度”和“高度”等于零，留一个空白区域作为图像。但是，使用display:content;代替display:none;可以正常工作，没有空隙区域，也没有图像。

为什么svg <use xlink：href =“＃”>引用带剪辑路径的元素不起作用？

2 个答案: