如何更改 svg 文件的 z-index？

Question

我知道有很多這樣的問題，我已經看過了，但在這種情況下沒有一個對我有幫助。

我正在研究 React 應用程序。 一個組件是一個 SVG 文件，第二個組件是第二個 SVG 文件。

我在主文件（App.js）中渲染這兩個組件。 像這樣。

<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組件是我希望它位於底部的組件，而Button組件是我希望它位於頂部的組件。 為了更好地理解，這里是圖片。

Waves 組件只是我像這樣導入的 SVG 文件：

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

按鈕組件看起來像這樣。

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;

我試圖為兩者設置 z-indexes，但沒有任何變化。 你知道怎么可能嗎？ 謝謝你。

Answer 1

Z-Index 不適用於 SVG 文件。 如果您希望 SVG 形狀位於其他形狀之上，請將該形狀渲染為最后一個。 渲染的最后一個形狀將位於其他形狀的頂部。