是否可以將我的動態原色從 ReactJS 設定為 SVG 的特定類？如果是這樣，我該如何實施？
錯誤.svg
<!-- Generator: Adobe Illustrator 26.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
....
.st9{fill:#E0E0E0;}
.st10{display:inline;}
<!-- Primary -->
.st11{fill:#CA0B00;} <--- Here is the color that I want to be able to change dynamically
<!-- Primary -->
.st12{opacity:0.9;fill:#FFFFFF;}
.st13{fill:#263238;}
....
</style>
....
</svg>
應用程式.js
import React, {useEffect, useState} from "react";
import Error from "./Error.svg";
const App = () => {
const [primary, setPrimary] = useState("#FFFFFF");
useEffect(() => {....},[]); <--- sets the color for the primary
return <img src={Error} />
}
export default App;
uj5u.com熱心網友回復：
您可以使用SVGR之類的工具將 SVG 轉換為 React 組件。然后，您可以將動態顏色作為道具傳遞給您的 SVG 組件，并將其分配給fill您希望的任何 SVG 元素的屬性。
根據更改顏色所需的條件，您的最終解決方案可能會有所不同。但是，下面的作業示例是您提供的示例代碼的簡化版本。
您可以使用此示例中的重新渲染按鈕來查看實際效果。它觸發了一個onClick處理程式，該處理程式primary使用隨機顏色設定狀態。我們包含primary在依賴陣列中，useEffect以便它在我們的狀態更新時執行重新渲染。
import React, { useState, useEffect } from "react";
const SvgComponent = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" height={140} width={500}>
<path className="my-target-class" fill={props.color} d="M0 0h300v100H0z" />
</svg>
)
function App() {
const colors = ["#7FFF00", "#ADFF2F", "#FF0000", "#00FF7F", "#00FF7F"];
const [primary, setPrimary] = useState("#7FFF00");
useEffect(() => {
console.log("state changed");
console.log("color is: ", primary);
}, [primary]);
const handleClick = () => {
const color = colors[ Math.floor(Math.random() * colors.length) ];
setPrimary(color);
}
return (
<div>
<button onClick={(handleClick)}>Re-render</button>
<SvgComponent color={primary} />
</div>
);
}
export default App;
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/441114.html
標籤：javascript css 反应 svg
上一篇：顏色選擇器按鈕的問題是svg并且被更改的元素也是svg
下一篇：在不同作業系統上呈現不同的SVG