0

I have a SVG hosted here

SVG1

And here is the implementation of SvgUri component in react-native to render the SVG using the same link listed above.

  <SvgUri
     uri={'https://static.hackerkid.org/hackerKid/live/awards/awd-leaderboard-4.svg'}
     width={'100%'}
     height={'100%'}
   />

This is how it looks

enter image description here

This is how it is supposed to look

enter image description here

react-native-svg is not rendering the svg fully, the code for the SVG is quite big hence not referenced here. Please open the above mentioned link and inspect the SVG.

I did some research before posting here. According to this post, it says some tags like <g> are not being rendered properly. Any help regarding this is appreciated.

Thank you.

Sai Darshan
  • 252
  • 3
  • 13
  • It seems the lib is interpreting the `x` and `y` attributes of the `` element wrongly - certainly a bug, but apparently [not reported yet](https://github.com/software-mansion/react-native-svg/issues?q=is%3Aissue+is%3Aopen+mask). As a workaround, try opening the SVG file in a text editor, search for the RegEx `/x="\d+" y="\d+" width="\d+" height="\d+"/` and either remove all occurences, or replace it globally with `x="0" y="0" width="256" height="256"`. Also, this might be a problem specific to a Windows environment – ccprog Mar 29 '23 at 13:59

0 Answers0