0

I am using the react-leaflet component <Rectangle /> and I am trying to add a CSS gradient (regarding opacity) to it.

AFAIK I need to create a <defs><linearGradient {...} /></defs> to the <svg> element, which is the box of the rectangles. (Which are basically grouped <path> elements.)

Like it is described here: https://stackoverflow.com/a/14051549/2092322

Is there any way to grab the svg element and add the <linearGradient> configurations to it?

I have tried to use a useRef callback of a surrounding <div> element, but it turned out that leaflets pane is rendered outside of it. And I cannot use a useRef callback directly on a surrounding <Pane>, since it is not allowed in the typings (using "typescript": "^4.7.2" and "@types/react-leaflet": "^2.8.2").

I am afraid, that I need my own <div> elements as custom Marker icon and style them, but I'd like to know, whether there is a way to do it with <Rectangle>, too.

Improve this question
Related questions
2375
How can I programmatically navigate using React Router?
2099
Loop inside React JSX
1097
How do I conditionally add attributes to React components?
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.