我知道之前已經回答過這個問題，但沒有解決方案對我有用。我想在 html 頁面上呈現一個 svg 檔案并從 javascript 訪問其代碼元素。我想更改特定元素的屬性。具體來說，我想更改添加一個屬性 style="fill:#FFFFFF;"。稍后我會想洗掉它。我想使用元素的 id 屬性訪問該元素。我嘗試使用大量 javascript 代碼執行此操作，并將 svg 渲染為 img 和物件，但沒有任何效果。這可能嗎？如果是這樣怎么辦？提前致謝。
uj5u.com熱心網友回復：
你可以為你的 SVG 創建一個 react 組件，并以react 的方式使用 props 控制它們的屬性：
const SampleIcon = ({fill='red',backgroundColor='white', width='300', height='200'}) => (
<svg version="1.1"
width={width} height={height}
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill={backgroundColor} />
<text x="150" y="125" font-size="60" text-anchor="middle" fill={fill}>SVG</text>
</svg>
)
現在使用它：
const App = () => (
<div>
<SampleIcon fill='green' backgroundColor='#ff0'/>
<SampleIcon with={400} height={300}/>
</div>
)
uj5u.com熱心網友回復：
無法更改要在 img 標簽中顯示的 SVG 的 fill 屬性。但是，您可以更改該filter屬性。
所以你想要做的是像這樣顯示 svg 檔案：
<img src="./your.svg"/>
你必須給你的 img 標簽一個類名（同樣，不要行內設定 fill 屬性）。
然后你可以簡單地應用 afilter并且 svg 的顏色將被更改，如下所示：
.your-icon {
filter: invert(14%) sepia(95%) saturate(6069%) hue-rotate(360deg) brightness(108%) contrast(117%);
}
上面的過濾器是紅色的。使用此十六進制過濾轉換器為您找到合適的顏色：十六進制過濾。
這是一個代碼沙盒演示。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/339673.html
標籤：javascript 反应