CODEWITHSUNDEEP
javascripthtmlcssreactjssvg
Pinnci
Pinnci

Reputation: 453

How to change z-index on svg files?

I know there are plenty of these questions and I've already seen them ,but none helped me in this case.

I'm working on React Application. And one component is one SVG file and second component is second SVG file.

Both of these components I'm rendering inside main file (App.js). Just like this.

<div className="app">
  <div className="container">
  <Gender 
    changeGender={changeGender}/>

  <Range 
    getHeight={getHeight}
    getWeight={getWeight} 
    Height={bmi.height}
    Weight={bmi.weight}/>

  <Button className="button" />
  </div>

  <Waves className="waves" />
  

  <Result />
</div>

Waves component is the component that I want it to be on the bottom and Button component is the component that I want to be on the top. For better understanding ,here is the picture.

enter image description here

Waves component is simply SVG file which I'm importing like this :

import {ReactComponent as Waves} from './Icons/waves.svg';

And Button component looks like this.

import React from 'react';
import { ReactComponent as Arrow } from "../Icons/arrow.svg";

function Button(){

    return(
        <div className="buttonContainer">
            <Arrow className="arrow-icon" />
        </div>   
    );
}

export default Button;

I've tried to set z-indexes for both but nothing changes. Do you have any idea how is it possible? Thank you.

Upvotes: 0

Views: 680

Answers (1)

Pinnci
Pinnci

Reputation: 453

Z-Index doesn't work for SVG files. If you want SVG shape to be on top of the others ,render that shape as last. Last shape rendered will be on the top of the others.

Upvotes: 2

Related Questions