grunt-svgstore

Why does svg <use xlink:href=“#”/> referencing an element with clip-path not work?

不想你离开。 提交于 2019-12-06 02:49:03
问题 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. How do I use an svg <use xlink:href="#"/> referencing an element with clip-path? I used grunt-svg-store to create my svg sprite, but have simplified this example for Q&A format https:/

Why does svg <use xlink:href=“#”/> referencing an element with clip-path not work?

微笑、不失礼 提交于 2019-12-04 08:42:52
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. How do I use an svg <use xlink:href="#"/> referencing an element with clip-path? 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