vault-development / react-native-svg-uri

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

fill-opacity issue #107

Open ivmos opened 6 years ago

ivmos commented 6 years ago

Hi, I have two assets that are rendered the same but they shouldn't.

environment

"react-native": "0.51.0",
"react-native-svg": "^5.3.0",
"react-native-svg-uri": "^1.2.3",

issue

cat icon_webcam_black_on.svg

<svg fill="#000000" height="36" viewBox="0 0 24 24" width="36" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/>

cat icon_webcam_white_on.svg

<svg fill="#FFFFFF" fill-opacity="0.5" height="36" viewBox="0 0 24 24" width="36" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/>
</svg>

diff -u icon_webcam_black_on.svg icon_webcam_white_on.svg

--- icon_webcam_black_on.svg    2018-01-16 16:20:34.000000000 +0100
+++ icon_webcam_white_on.svg    2018-01-16 16:20:57.000000000 +0100
@@ -1,4 +1,4 @@
-<svg fill="#000000" height="36" viewBox="0 0 24 24" width="36" xmlns="http://www.w3.org/2000/svg">
+<svg fill="#FFFFFF" fill-opacity="0.5" height="36" viewBox="0 0 24 24" width="36" xmlns="http://www.w3.org/2000/svg">
     <path d="M0 0h24v24H0z" fill="none"/>
     <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/>
-</svg>
\ No newline at end of file
+</svg>

Both are being displayed this way:

shot

but one of them should be white... Is fill-opacity well supported? https://snack.expo.io/Syazzz3Ez

Thanks in advance.

I guess https://github.com/vault-development/react-native-svg-uri/pull/105 is related to this?