Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<Mask> does not inherit stroke properties from parent <Svg> in React Native #1985

Open
elliotgeno opened this issue Feb 7, 2023 · 1 comment
Labels

Comments

@elliotgeno
Copy link

elliotgeno commented Feb 7, 2023

Bug
The following code is an example of a that should inherit the stroke properties from its container :
<Svg fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={6} // <Mask> should inherit <Svg> stroke properties like the web viewBox="0 0 100 100" width={100} height={100} style={styles.container} > <Mask id="a"> <Rect width="100%" height="100%" fill="#fff" stroke="none" /> <Path stroke="#000" strokeDasharray="8 10 28" d="M27 41h46M27 75h46M27 58h46" /> </Mask> <Rect width={68} height={84} x={16} y={8} fill="currentColor" mask="url(#a)" rx={6} /> </Svg>

Expected Behavior
The lines rendered inside this mask should adopt the stroke properties from the parent SVG. This works correctly on the web. HOWEVER, it doesn't work properly in a React Native project. I've only tested IOS so far, but the lines show up without any stroke properties inherited. (perhaps others too)

Should look like this:
image

Renders like this on IOS:
image

Unfortunately you cannot immediately test this in the browser as it works fine in-browser. So this example link doesn't help much... you have to run it on a IOS simulator:
https://codesandbox.io/s/react-native-svg-test-forked-i4y0ro?file=/src/App.js

@bohdanprog bohdanprog added the bug label Jun 27, 2024
@bohdanprog
Copy link
Member

bohdanprog commented Jun 27, 2024

here is the repro of how it should look:
https://www.svgviewer.dev/s/9RLJcAPa

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants