zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2026-06-01 06:07:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement mask-type property (#2152)

Browse Source 
# Summary

"mask-type: alpha" is not supported. 
resolve issue: #1790  

## Explanation

svg example:
```
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" fill="none">
<g clip-path="url(#clip0_8_3)">
<rect width="100" height="100" fill="white"/>
<mask id="mask0_8_3" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
<circle cx="50" cy="50" r="50" fill="#000000"/>
</mask>
<g mask="url(#mask0_8_3)">
<rect x="-26" y="-78" width="209" height="263" fill="#252E74"/>
</g>
</g>
<defs>
<clipPath id="clip0_8_3">
<rect width="100" height="100" fill="white"/>
</clipPath>
</defs>
</svg>
```

Current behavior: 

![image](https://github.com/software-mansion/react-native-svg/assets/17138397/2dca6f46-fe8f-48f3-80f9-799563911e8b)

Expected behavior:

![image](https://github.com/software-mansion/react-native-svg/assets/17138397/fb49cf0b-d677-491f-8215-9c9b1d69080f)

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |    ✅    |
| Android |    ✅    |

## Checklist

<!-- Check completed item, when applicable, via: [X] -->

- [x] I have tested this on a device and a simulator
- [ ] I added documentation in `README.md`
- [x] I updated the typed files (typescript)
- [ ] I added a test for the API in the `__tests__` folder

---------

Co-authored-by: Sergey <s.yurkevich@logiclike.com>
Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
This commit is contained in:
SergeyYurkevich
2024-07-05 16:11:48 +03:00
committed by GitHub
parent 7c1602e291
commit 832522d1c1
19 changed files with 166 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/test-examples/App.js
+2 -1
View File
@@ -8,6 +8,7 @@ import Test1374 from './src/Test1374';
import Test1442 from './src/Test1442';
import Test1451 from './src/Test1451';
import Test1718 from './src/Test1718';
import Test1790 from './src/Test1790';
import Test1813 from './src/Test1813';
import Test1845 from './src/Test1845';
import Test1986 from './src/Test1986';
@@ -23,5 +24,5 @@ import Test2276 from './src/Test2276';
import Test2327 from './src/Test2327';
export default function App() {
return <ColorTest />;
return <Test1790 />;
}
apps/test-examples/src/Test1790.tsx
+35
View File
@@ -0,0 +1,35 @@
import React from 'react';
import {View} from 'react-native';
import {SvgXml} from 'react-native-svg';
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" fill="none">
<g clip-path="url(#clip0_8_3)">
<rect width="100" height="100" fill="white"/>
<mask id="mask0_8_3" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
<circle cx="50" cy="50" r="50" fill="#7e7e7e"/>
</mask>
<g mask="url(#mask0_8_3)">
<rect x="-26" y="-78" width="209" height="263" fill="#252E74"/>
</g>
</g>
<defs>
<clipPath id="clip0_8_3">
<rect width="100" height="100" fill="white"/>
</clipPath>
</defs>
</svg>
`;
export default function Test1790() {
return (
<View
style={{
flex: 1,
backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
}}>
<SvgXml xml={svg} />
</View>
);
}