react-native-svg
react-native-svg copied to clipboard
ClipPath support for display:none
Feature Request
I'm trying to setup a rectangular ClipPath to only show a certain area on the SVG, while clipping the rest. I want to activate this ClipPath only when computationally necessary to speed up the rendering (heavy animations on a large SVG). I am using reanimated API for all the animations and I was hoping of enabling/disabling the ClipPath via an animated value setting display: none
in a condition.
According to this: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/display
This attribute also affects direct rendering into offscreen canvases, such as occurs with masks or clip paths. Thus, setting display="none" on a child of a <mask> will prevent the given child element from being rendered as part of the mask. Similarly, setting display="none" on a child of a <clipPath> element will prevent the given child element from contributing to the clipping path.
However, I've tried setting display: none directly to the Rect inside the ClipPath, no animated values, just a plain style (or prop) but it has no effect on the ClipPath.
Any ideas on how I can achieve this?