search

software-mansion / react-native-svg

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

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

Open elliotgeno opened 1 year ago

elliotgeno commented 1 year ago

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} // should inherit stroke properties like the web viewBox="0 0 100 100" width={100} height={100} style={styles.container}

<Rect width={68} height={84} x={16} y={8} fill="currentColor" mask="url(#a)" rx={6} /> `

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 commented 4 weeks ago

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