When incorporating an SVG sprite, an <svg> element is generated and svg elements are accessed using the <use> element. The parent <svg> element is then concealed by adding style="display: none;"
While the clip-Path attribute does not display, the path itself does. This results in my path appearing different from what I intended.
How can I utilize an svg <use xlink:href="#"/> that references an element with a clip-path?
I leveraged grunt-svg-store to produce my svg sprite, however, for the purpose of this Q&A format, I have simplified the process. Visit here for more details
<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>