software-mansion / react-native-svg

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

Simple Svg works on iOS but not on Android #1696

Closed charity-detalytics closed 2 months ago

charity-detalytics commented 2 years ago

Bug

Simple Svg works on iOS but not on Android

Screen Shot 2022-02-19 at 16 04 44

Steps To Reproduce

I have just created this new and simple repo for reproducing the issue: https://github.com/charity-detalytics/SrgErr

import React from 'react';
import type {Node} from 'react';
import {
  View,
} from 'react-native';
import X from './x.svg'

const App: () => Node = () => {
  return (
    <View>
      <X/>
    </View>
  );
};

export default App;
<svg width="100%" height="100%" viewBox="0 0 325 432">
  <mask id="id" x="143" y="278" width="182" height="69">
    <path d="M143.867 278.211H325V346.467H143.867V278.211Z" fill="white"/>
  </mask>
  <g mask="url(#id)">
    <path d="M167.267 323.524L487.933 264.391L818.133 323.524" stroke="red" stroke-width="13"/>
  </g>
</svg>

Describe what you expected to happen: Please see the screen shot above!

Cnilton commented 2 years ago

Hi guys, I could reproduce this issue either. When there is more than one item together with masks in the svg, it cuts the image on android:

Captura de Tela 2022-02-25 às 12 44 33
bohdanprog commented 3 months ago

Hello @charity-detalytics, I tried to reproduce your issue but couldn't. Do you still have that problem?