ClipPath is not working properly on Android without clipRule prop
See original GitHub issueBug
Looks like ClipPath has only id
prop, but at the same time code below do not working properly on android without this prop
Environment info
System:
OS: macOS 10.15.5
CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
Memory: 19.82 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.2.0 - ~/.nvm/versions/node/v12.2.0/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.5 - ~/.nvm/versions/node/v12.2.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK: Not Found
IDEs:
Android Studio: 3.6 AI-192.7142.36.36.6392135
Xcode: 11.5/11E608c - /usr/bin/xcodebuild
Languages:
Java: 9.0.4 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.11.0 => 16.11.0
react-native: 0.62.2 => 0.62.2
npmGlobalPackages:
*react-native*: Not Found
Library version: 12.1.0
Steps To Reproduce
Issues without reproduction steps or code are likely to stall.
- Use code below
- Try it with
// @ts-ignore clipRule={'evenodd'}
and without
Describe what you expected to happen:
- It should work without it OR need to fix the TS (types)
Short, Self Contained, Correct (Compilable), Example
<Svg width={'100%'} height={'100%'} viewBox={'0 0 256 340'}>
<Defs>
<Rect
id={'backgroundRect'}
x={-1}
y={-1}
width={258}
height={342}
fill={BACKGROUND_COLOR}
/>
<Rect
id={'faceOvalRect'}
x={1}
y={1}
width={254}
height={338}
ry={127}
stroke={'#fff'}
strokeWidth={2}
/>
<ClipPath
id={'clip'}
// @ts-ignore
clipRule={'evenodd'}
>
<G>
<Use href={'#backgroundRect'} />
<Use href={'#faceOvalRect'} />
</G>
</ClipPath>
</Defs>
<Use
href={'#backgroundRect'}
clipPath={'url(#clip)'}
clipRule={'evenodd'}
/>
<Use href={'#faceOvalRect'} />
</Svg>
Issue Analytics
- State:
- Created 3 years ago
- Reactions:3
- Comments:9 (2 by maintainers)
Top Results From Across the Web
ClipPath is not working properly on Android without clipRule ...
Bug Looks like ClipPath has only id prop, but at the same time code below do not working properly on android without this...
Read more >clip-path - CSS: Cascading Style Sheets - MDN Web Docs
The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the...
Read more >CSS clip-path not working in Chrome 63 - Stack Overflow
Seems that Chrome has partial support to clip-path, to shapes and inline svgs. But even with the shape property, it isn't working properly....
Read more >Clipping, Masking and Compositing – SVG 1.1 (Second Edition)
For all other elements, the property has no effect (i.e., a clipping rectangle is not ... A clipping path is used/referenced using the...
Read more >CSS clip-path property (for HTML) | Can I use... Support tables ...
Support refers to the clip-path CSS property on HTML elements specifically. Support for clip-path in SVG is supported in all browsers with basic...
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
I finally got around this issue with an odd solution! (I also update
react-native-svg
to12.1.1
but no luck)It was working fine in iOS even without
clipRule
parameter, so I ended up changingclipRule
to its other variant whenever theprops.data
was changing (only when the device isandroid
). so this is my workaround that works on both iOS and android:and finally give this
clipRule
state as a prop to your<ClipPath/>
component, like:I wish I was kidding but this works!
@magicismight
why the new version does not follow semantic version rules? is it a stable version or an RC version? (I just think
12.1.1
was better)also, please consider updating the changelog if you have time for it. Thanks