將 SVG 載入為內聯並更改填滿顏色
P粉323224129
P粉323224129 2024-04-02 13:32:42
0
1
322

我這樣使用 SVG:

<image x="0" y="0" width="40" height="40" href="/resource.svg"></image>

這是資源.svg:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="217px" height="131px" viewBox="-0.5 -0.5 217 131"><defs/><g><ellipse cx="108" cy="65" rx="108" ry="65" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><ellipse cx="108" cy="65" rx="40" ry="40" fill="#a0522d" stroke="#6d1f00" pointer-events="all"/></g></svg>

現在,我應該動態更改 svg 的顏色。為此,我考慮是否可以完全加載 SVG(內聯?)而不是作為鏈接,然後替換填充和描邊的值(使用字符串替換)。如果我內聯使用它,是否也可以透過 CSS 實現這一點?

有人可以幫助我這是否可能嗎?如果可以,我必須朝哪個方向進一步研究?

P粉323224129
P粉323224129

全部回覆(1)
P粉639667504

從 svg 程式碼中刪除 fill 屬性。這迫使它始終是白色的,就像現在一樣。 或者,如果您在框架中工作,則可以使 fill 屬性動態化(例如 fill={{myProp}})。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!