link to the clip item not working? When implementing an SVG sprite, an element is created and...">

Why is svg <use xlink: href = "#" / "> link to the clip item not working?

When implementing an SVG sprite, an element is created <svg>

and svg elements are referenced through the element <use>

. The hiding element is <svg>

then hidden withstyle="display: none;"

The clip-Path attribute is not displayed, but the path does matter. This leaves my path different from how I want it.

How do I use svg <use xlink:href="#"/>

to link to an element with a clip?

I used grunt-svg-store to generate my svg sprite, but 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>

      

Live example at Codepen.io

+3


source to share


1 answer


Use <svg style="width:0; height:0;">

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

      



Live example at Codepen.io

+3


source







All Articles