Skip to content

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

@elliotgeno

Description

@elliotgeno

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions