I have a .svg which looks like this:
So those are a few rectangles with border radius that have image as a background. That .svg was exported from Figma and I used react-svgr.com to convert it to a React component which looks like this:
import Svg, {
SvgProps,
Rect,
Path,
Defs,
Pattern,
Use,
Image,
} from "react-native-svg"
function SvgComponent(props: SvgProps) {
return (
<Svg
width={375}
height={451}
viewBox="0 0 375 451"
fill="none"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
{...props}
>
<Rect
x={141}
y={24}
width={45}
height={45}
rx={22.5}
fill="url(#pattern0)"
/>
<Rect
x={103}
y={1}
width={27}
height={27}
rx={13.5}
fill="url(#pattern1)"
fillOpacity={0.2}
/>
<Rect
x={37}
y={43}
width={52}
height={52}
rx={26}
fill="url(#pattern2)"
/>
<Rect
x={20}
y={119}
width={77}
height={77}
rx={38.5}
fill="url(#pattern3)"
/>
<Rect
x={109}
y={75}
width={36}
height={36}
rx={18}
fill="url(#pattern4)"
fillOpacity={0.5}
/>
<Rect
x={181}
y={105}
width={70}
height={70}
rx={35}
fill="url(#pattern5)"
/>
<Rect
x={286}
y={49}
width={70}
height={70}
rx={35}
fill="url(#pattern6)"
/>
<Rect
opacity={0.1}
x={283}
y={13}
width={24}
height={24}
rx={12}
fill="url(#pattern7)"
/>
<Rect
x={263}
y={140}
width={101}
height={101}
rx={50.5}
fill="url(#pattern8)"
/>
<Rect
x={221}
y={36}
width={48}
height={48}
rx={24}
fill="url(#pattern9)"
fillOpacity={0.5}
/>
<Rect
x={208}
width={15}
height={15}
rx={7.5}
fill="url(#pattern10)"
fillOpacity={0.5}
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M190 95.5C190 100.194 186.194 104 181.5 104C176.805 104 173 100.194 173 95.5C173 90.8056 176.805 87 181.5 87C186.194 87 190 90.8056 190 95.5ZM159 122.5C159 139.345 145.344 153 128.5 153C111.655 153 97.9998 139.345 97.9998 122.5C97.9998 105.655 111.655 92 128.5 92C145.344 92 159 105.655 159 122.5ZM90.2745 308.718C78.681 329.187 56.7037 343 31.5 343C-5.77922 343 -36 312.779 -36 275.5C-36 257.443 -28.9096 241.042 -17.3612 228.929C-19.0572 225.133 -20.0002 220.927 -20.0002 216.5C-20.0002 199.655 -6.34493 186 10.4998 186C20.055 186 28.5839 190.394 34.1762 197.272C45.6154 176.26 67.8924 162 93.5 162C108.072 162 121.565 166.617 132.596 174.469C135.396 160.513 147.72 150 162.5 150C175.81 150 187.129 158.526 191.293 170.414C194.198 169.496 197.291 169 200.5 169C205.309 169 209.859 170.113 213.905 172.096C217.213 158.829 229.209 149 243.5 149C260.345 149 274 162.655 274 179.5C274 185.335 272.361 190.788 269.519 195.423C272.975 195.143 276.471 195 280 195C301.742 195 322.218 200.421 340.15 209.985C345.133 199.92 355.508 193 367.5 193C384.344 193 398 206.655 398 223.5C398 234.1 392.592 243.437 384.385 248.903C399.256 269.815 408 295.386 408 323C408 393.692 350.692 451 280 451C260.867 451 242.714 446.802 226.413 439.277C222.008 439.755 217.532 440 213 440C145.069 440 90 384.931 90 317C90 314.217 90.0925 311.455 90.2745 308.718ZM194 156C202.836 156 210 148.837 210 140C210 131.163 202.836 124 194 124C185.163 124 178 131.163 178 140C178 148.837 185.163 156 194 156Z"
fill="#335EEA"
/>
<Defs>
<Pattern
id="pattern0"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image0"
transform="translate(0 -0.521277) scale(0.00425532)"
/>
</Pattern>
<Pattern
id="pattern1"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image1"
transform="translate(-0.25) scale(0.003125)"
/>
</Pattern>
<Pattern
id="pattern2"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image2"
transform="translate(0 -0.25) scale(0.003125)"
/>
</Pattern>
<Pattern
id="pattern3"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image3"
transform="translate(0 -0.181818) scale(0.00284091)"
/>
</Pattern>
<Pattern
id="pattern4"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image4"
transform="translate(0 -0.121762) scale(0.00259067)"
/>
</Pattern>
<Pattern
id="pattern5"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image5"
transform="translate(0 -0.25) scale(0.003125)"
/>
</Pattern>
<Pattern
id="pattern6"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image6"
transform="translate(0 -0.25) scale(0.003125)"
/>
</Pattern>
<Pattern
id="pattern7"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image7"
transform="translate(-0.0783133) scale(0.00240964)"
/>
</Pattern>
<Pattern
id="pattern8"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image8"
transform="translate(0 -0.25) scale(0.003125)"
/>
</Pattern>
<Pattern
id="pattern9"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image9"
transform="translate(-0.25) scale(0.003125)"
/>
</Pattern>
<Pattern
id="pattern10"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image10"
transform="translate(-0.25) scale(0.003125)"
/>
</Pattern>
<Image
id="image0"
width={235}
height={480}
xlinkHref="data..."
/>
<Image
id="image1"
width={480}
height={320}
xlinkHref="data..."
/>
<Image
id="image3"
width={352}
height={480}
xlinkHref="data..."
/>
<Image
id="image4"
width={386}
height={480}
xlinkHref="data..."
/>
<Image
id="image5"
width={320}
height={480}
xlinkHref="data..."
/>
<Image
id="image6"
width={320}
height={480}
xlinkHref="data..."
/>
<Image
id="image7"
width={480}
height={415}
xlinkHref="data..."
/>
<Image
id="image8"
width={320}
height={480}
xlinkHref="data..."
/>
<Image
id="image9"
width={480}
height={320}
xlinkHref="data..."
/>
<Image
id="image10"
width={480}
height={320}
xlinkHref="data.."
/>
</Defs>
</Svg>
)
}
export default SvgComponent
The problem I am experiencing is that the rendered svg component looks like that:
So the images for the rectangles that are defined as Patterns have wrong coordinates/do not match the position of those rectangles. I am not sure why this is the case and have tried reformating my .svg but nothing seemed to solve the issue. Can somebody please point me into the right direction?
