react-native-svg icon indicating copy to clipboard operation
react-native-svg copied to clipboard

ClipPath support for display:none

Open noldidrita opened this issue 4 years ago • 1 comments

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?

noldidrita avatar Apr 17 '20 22:04 noldidrita