Applying pattern image to Path

[brunof17]

Bug

Hi, I was using this package to show a screen that is made with SVGs. I got a path that I want to fill with a image, and I would like the image to be centered.

A example image:

The code for the pattern and the Path that I want to fill are down here.
<Svg id="prefix__Layer_1" data-name="Layer 1" viewBox="0 0 1920 1080" > <Defs> <Pattern id={'idimage'} width="100%" height="100%" viewBox="0 0 320 180" x="0" y="0" > <Image href={{ uri: 'https://img.youtube.com/vi/KBfu3LirIQg/mqdefault.jpg' }} preserveAspectRatio="xMinyMax meet" width="320" height="180" /> </Pattern> </Defs> <Path fill="#486F79" d="M1618.6 133.1v111.8c0 14.6-12.7 26.5-28.2 26.5h-140c-34.1 41.6-76.9 40.7-76.9 40.7 18.3-7.2 28.4-25.8 33.7-40.7H1367c-15.6 0-28.2-11.9-28.2-26.5V133.1c0-14.6 12.7-26.5 28.2-26.5h223.4c15.5 0 28.1 11.8 28.2 26.5z" /> <Path fill="url(#idimage)" d="M1370.7 262.4h216c13 0 23.7-10.7 23.7-23.7V138.1c0-13-10.7-23.7-23.7-23.7h-216c-13 0-23.7 10.7-23.7 23.7v100.5c0 13.1 10.7 23.8 23.7 23.8z" /> </Svg>

The output from this is the following:

I then tested this on the web, trying to figure out if I was doing anything wrong with the SVGs.
The HTML code is as follows

<svg version="1.1" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve"> <defs> <pattern id="imageid" viewBox="0 0 320 180" x="0" width="1" height="1" y="0" > <image width="320" height="180" xlink:href="https://img.youtube.com/vi/KBfu3LirIQg/mqdefault.jpg"/> </pattern> </defs> <g> <path fill="#486F79" d="M191.9,669.6V557.8c0-14.6,12.7-26.5,28.2-26.5h140c34.1-41.6,76.9-40.7,76.9-40.7 c-18.3,7.2-28.4,25.8-33.7,40.7h40.2c15.6,0,28.2,11.9,28.2,26.5v111.8c0,14.6-12.7,26.5-28.2,26.5H220.1 C204.6,696.1,192,684.3,191.9,669.6z"/> <path fill="url(#imageid)" d="M439.7,540.3h-216c-13,0-23.7,10.7-23.7,23.7v100.5c0,13,10.7,23.7,23.7,23.7h216c13,0,23.7-10.7,23.7-23.7 V564C463.5,551,452.8,540.3,439.7,540.3z"/> </g> <g> <path class="st212" d="M693.8,967.9V856.1c0-14.6,12.7-26.5,28.2-26.5h140c34.1-41.6,76.9-40.7,76.9-40.7 c-18.3,7.2-28.4,25.8-33.7,40.7h40.2c15.6,0,28.2,11.9,28.2,26.5v111.8c0,14.6-12.7,26.5-28.2,26.5H722 C706.5,994.3,693.9,982.5,693.8,967.9z"/> <path fill="url(#imageid)" d="M941.7,838.6h-216c-13,0-23.7,10.7-23.7,23.7v100.5c0,13,10.7,23.7,23.7,23.7h216c13,0,23.7-10.7,23.7-23.7 V862.3C965.4,849.2,954.8,838.6,941.7,838.6z"/> </g> </svg>

This produces the expected behaviour as seen in the image below:

We then tried to import the SVG directly on the code, and the result was the same as the one from the components.

I am now wondering if this is any bug with the package itself or if we are doing anything wrong.
Thanks in advance

[EDIT] It was only tested on Android Platforms.

Environment info

System: OS: macOS Mojave 10.14.4 CPU: (6) x64 Intel(R) Core(TM) i5-8500 CPU @ 3.00GHz Memory: 29.52 MB / 8.00 GB Shell: 5.3 - /bin/zsh Binaries: Node: 12.16.1 npm: 6.13.4 Watchman: 4.9.0 Managers: CocoaPods: 1.9.0 SDKs: iOS SDK: Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1 Android SDK: API Levels: 28, 30 Build Tools: 28.0.3, 30.0.1 System Images: android-22 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-28 | Android TV Intel x86 Atom, android-28 | Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: 4.0 AI-193.6911.18.40.6514223 Xcode: 11.3.1/11C504 Languages: Java: Not Found Python: 2.7.10 npmPackages: @react-native-community/cli: Not Found react: 16.9.0 => 16.9.0 react-native: ^0.62.0 => 0.62.2 npmGlobalPackages: *react-native*: Not Found

[brunof17]

Found a work around.

I opened the SVG on Adobe Illustrator (or maybe another SVG editor) and added a sample image to each of the spots that I wanted. The program will generate the transformation Matrix needed for the image to be on the correct place, so no Defs are used and no patterns are applied to the Path.
After that you just need to change the xlinkHref for the correct one.

The image component will be as such:
<Image width={299} height={168} xlinkHref={this.uri} transform="translate(827.966 26.05) scale(.8036)" overflow="visible" />

Width/height/transform are all generated.

I will leave the issue open since the problem that I encountered is still there.
Thanks

[joey-harward]

I am having the same issue with a stray pattern on an image. Was this ever fixed?

[witherBattler]

I'm having this issue as well

[peterhpchen]

I encountered the same issue and worked around it by converting to PNG and rendering it with an image element.