Skip to content

svg containing linear gradient is not rendered #2581

Open
@mlecoq

Description

Description

When I am using a svg file with a linear gradient in it, it is not displayed with react-native-svg (to compare react-native-skia display it well).

I see errors in my console: "currentColor" is not a valid color or "1" is not a valid offset [Component Stack]

Simulator Screenshot - iPhone 16 Pro - 2024-12-17 at 17 10 35

Steps to reproduce

  1. create a svg using SvgUri with an uri that serves a file containing
<svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" preserveAspectRatio="none">
<rect width="150" height="150" fill="url(#gradient)"/>
<defs>
<linearGradient id="gradient" x1="75" y1="0" x2="75" y2="150" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="currentColor"/>
<stop offset="1" stop-opacity="0" stop-color="currentColor"/>
</linearGradient>
</defs>
</svg>




### Snack or a link to a repository

https://github.com/mlecoq/react-native-svg-gradient

### SVG version

15.10.1

### React Native version

0.76.5

### Platforms

iOS

### JavaScript runtime

Hermes

### Workflow

Expo Go

### Architecture

Fabric (New Architecture)

### Build type

Debug app & dev bundle

### Device

iOS simulator

### Device model

_No response_

### Acknowledgements

Yes

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions