search

vault-development / react-native-svg-uri

Render SVG images in React Native from an URL or static file
850 stars 334 forks source link

render svg with incorrect style #120

Open alonesuperman opened 6 years ago

alonesuperman commented 6 years ago

my svg should be look like as follow(pic1) image But without luck, it render as follow(pic2) image

I found that it looks like lose the "defs" tag. when I got this idea, I tried to delete the inner code of defs tag, it looks same as pic2.

but when I debug the react-native-svg-url , I see that inputSvg was right, so I have no idea what's happen. image

here is my svg `<?xml version="1.0" encoding="UTF-8"?>

tab_home Created with Sketch. `
alonesuperman commented 6 years ago

Finally, I found the reason after debugging this lib. This lib base on react-native-svg@5.x , not the latest verson. So it miss some tag, such as "Use" and "Symbol".
I rewrite somewhere to fix it :

  1. add import {Use} from 'react-native-svg'
  2. fill some new tag from the doc of react-native-svg into the ACCEPTED_SVG_ELEMENTS
  3. add a new variable USE_ATTS = ['href']
  4. add new attrs(such as 'id') into G_ATTS and PATH_ATTS
  5. fill some new attrs from the doc of react-native-svg into the COMMON_ATTS
  6. modify the function so called obtainComponentAtts. replace the camelCaseNodeName to handleNodeName
  7. add a function into utils export const removeXLink = value => value.replace(xlink:, "");
  8. add a function into utils export const handleNodeName = ({ nodeName, nodeValue }) => ({ nodeName: removeXLink(camelCase(nodeName)), nodeValue });
  9. add some other feature.

After the work (1~8) above, the problem was resolved. And I publish as a new lib called react-native-svg-src base on react-native-svg@6.x ......

sylrty commented 6 years ago

@alonesuperman awesome