svg with clip-path doesn't display
See original GitHub issueI have an svg which includes a clip-path. When using it with this loader is doesn’t display.
<svg>
<defs>
<clipPath id="mask">
<circle cx="166.201" cy="166.201" r="166.201"/>
</clipPath>
</defs>
<g clip-path="url(#mask)">
...
</g>
</svg>
When debugging this I found that if I remove visibility: hidden from the injected svg with all the symbols it displays correctly. Is visibility: hidden needed?
Issue Analytics
- State:
- Created 7 years ago
- Comments:10 (7 by maintainers)
Top Results From Across the Web
Why is my clip-path not working when it's source is an svg?
And I've tried that, but it doesn't work. The clip-path property works with predefined methods like polygon() and ellipse() but it won't work ......
Read more >Unfortunately, clip-path: path() is Still a No-Go - CSS-Tricks
In the SVG case, these pixels scale with the viewBox of the <svg> element but they don't scale at all inside the CSS...
Read more >clip-path - CSS: Cascading Style Sheets - MDN Web Docs
The clip-path CSS property creates a clipping region that sets what ... Defines a polygon using an SVG filling rule and a set...
Read more >Hiding and Showing in SVG with Clip-path and Mask
SVG opens up a lot of visual possibilities. A big part of that is using clip-path and mask to hide and show images....
Read more >Clipping in CSS and SVG — The clip-path Property and ...
The clip-path property is used to specify a clipping path that is to be applied to an element. Using clip-path , you can...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@badtant please check 0.1.1 version
This is snippet I use for screen reader only content and have never experienced problems with it.
I tried it on the svg and it works so probably safer to use that!