Почему svg <use xlink: href = "#" /> ссылка на элемент с клипом не работает?

Question

При реализации SVG-спрайта создается элемент <svg>, а элементы svg ссылаются через элемент <use>. Содержит элемент <svg>, затем скрывается с помощью style="display: none;"

Атрибут clip-Path не отображается, но путь имеет значение. Это оставляет мой путь, отличный от того, как я хочу.

Как использовать svg <use xlink:href="#"/>, ссылающийся на элемент с клипом?

Я использовал черновой-SVG-магазин, чтобы создать свой SVG спрайт, но упростил этот пример для Q & формата, 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