-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Description
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)
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