Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

svg containing linear gradient is not rendered #2581

Open
mlecoq opened this issue Dec 17, 2024 · 1 comment
Open

svg containing linear gradient is not rendered #2581

mlecoq opened this issue Dec 17, 2024 · 1 comment

Comments

@mlecoq
Copy link
Contributor

mlecoq commented Dec 17, 2024

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
@mlecoq
Copy link
Contributor Author

mlecoq commented Dec 17, 2024

This issue is due to currentColor which doesn't seem to be well supported for linear (and radial gradient)

 const color = stopColor && processColor(stopColor);
    if (typeof color !== 'number' || isNaN(offsetNumber)) {
      console.warn(
        `"${stopColor}" is not a valid color or "${offset}" is not a valid offset`
      );
      continue;
    }

the given color value is processed directly whereas in other cases there is an extractBrush method which is called

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant