我有一個 SVG 模式作為在父容器中呈現的反應組件匯入。我希望該模式像background-image : 'cover'在父容器內一樣，但我不知道如何去做。目前高度超過容器。它看起來像這樣。
我不能將 SVG 用作背景影像，因為我需要動態更改它的填充顏色，我還需要能夠切換不同的 SVG 模式，因此將其用作資料 uri 會使代碼在主要反應中很長功能（存盤幾個svgs）。
目前我的代碼如下所示：
import React, { useState } from "react";
import { ReactComponent as Strata1 } from "./StrataSVG/Strata_01.svg"
import './App.css';
function App() {
const [color, setColorChosen] = useState("blue");
return (
<>
<div id="container">
<Strata1 className="pattern" style={{ color: color }}/>
</div>
</>
);
}
export default App;
CSS
#container {
width: 100vw;
height: 50vh;
background-color: yellow;
}
.pattern {
width: 100%;
height: auto;
}
uj5u.com熱心網友回復：
要在 中實作與 CSS' 的等效background-size: cover，請<svg>添加以下屬性。
<svg ... preserveAspectRatio="xMidYMid slice" ...>
...rest of SVG...
</svg>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/486828.html