为什么svg<使用xlink：href ="＃" />引用带有剪辑路径的元素不起作用？ [英] Why does svg <use xlink:href="#"/> referencing an element with clip-path not work?

问题描述

实现SVG sprite时，会创建< svg> 元素，并通过< use> 元素。包含< svg> 元素然后使用 style =display：none;

When implementing an SVG sprite, an <svg> element is created and svg elements are referenced via the <use> element. The containing <svg> element is then hidden using style="display: none;"

剪辑路径属性不会呈现，但路径会显示。这使我的路径看起来与我想要的不同。

The clip-Path attribute does not render, but the path does. This leaves my path looking different from how I want it to.

如何使用svg < use xlink：href =＃ /> 使用剪辑路径引用元素？

How do I use an svg <use xlink:href="#"/> referencing an element with clip-path?

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

I used grunt-svg-store to create my svg sprite, but have simplified this example for Q&A format 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上的实例

推荐答案

使用< svg style =width：0; height：0;> 来代替< svg style =display：none;> 来隐藏

Use <svg style="width:0; height:0;"> instead of <svg style="display: none;"> to hide the 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>

在Codepen.io上的实例

这篇关于为什么svg<使用xlink：href ="＃" />引用带有剪辑路径的元素不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！