react-native-svg icon indicating copy to clipboard operation
react-native-svg copied to clipboard

SVG not rendering correctly

Open tastydev opened this issue 1 year ago • 0 comments

Bug

buggy.svg

Hello, the above svg won't render correctly inside a react-native application. The part of the "mugshot" is missing, as you can see here on screenshots:

react-native:

renderinsideapp

while rendering correctly inside a browser:

insidebrowser

The issue has to be related to the clip mask at this part of the svg, the path inside the mask does not render correctly:

<mask xmlns="http://www.w3.org/2000/svg" id="mask1_52834_78905" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="96" y="27" width="35" height="45">
    <path d="M124.024 27.7921L104.941 27.1257C100.97 26.9871 97.6382 30.0941 97.4995 34.0654L96.4872 63.0533C96.3485 67.0247 99.4555 70.3566 103.427 70.4952L122.509 71.1616C126.481 71.3003 129.813 68.1933 129.951 64.2219L130.964 35.234C131.102 31.2627 127.995 27.9308 124.024 27.7921Z" fill="white"/>
</mask>

Environment info

iOS & Android

React native version:

v0.66.5

Library version: 14.1.0 react-native-svg-transformer version: 1.3.0

Steps To Reproduce

Try to render the mentioned svg inside a react-native application.

tastydev avatar Jan 18 '24 12:01 tastydev