search

software-mansion / react-native-svg

SVG library for React Native, React Native Web, and plain React web projects.
MIT License
7.45k stars 1.12k forks source link

ClipPath support for display:none #1350

Open noldidrita opened 4 years ago

noldidrita commented 4 years ago

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?

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.