我的頁面上有很多 SVG，我匯入為（在 React 中）：
import { ReactComponent as Logo } from "./../../../images/example.svg";
我以這種方式使用它們：
<div className='someClassName activeClassName?'>
<Logo />
</div>
但是它們的結構都不同。我是什么意思？一些 SVG 看起來像：
<svg>
<path/>
</svg>
一些喜歡：
<svg>
<g>
<g>
<path/>
</g>
</g>
</svg>
有些看起來像：
<svg>
<g>
<circle/>
<triangle/>
</g>
</svg>
并且有數百萬種這樣的型別。我有一個“activeClassName”，它用不同的顏色填充 SVG，當它處于活動狀態時，但是為了讓它與我所有的 SVG 一起作業，我必須像這樣描述我的類名樣式：
&--active {
svg {
fill: $primaryBlue !important;
path {
fill: $primaryBlue !important;
}
g {
fill: $primaryBlue !important;
g path {
fill: $primaryBlue !important;
}
}
}
}
這看起來很糟糕。例如，如何更改所有這些 SVG 的填充選項？請幫助我...謝謝
uj5u.com熱心網友回復：
正如@Robert Longson 和@chrwahl 指出的那樣：
建議從您的 svg 子元素中洗掉填充屬性。
不確定，如何“預處理/后處理”匯入的 svg 組件。
在純 js 中，您可以輕松地查詢子元素并洗掉屬性，如下所示：
顯示代碼片段
let svgAsset = document.querySelector(".svgAsset");
// query child elements – maybe includeother svg primitives like circles/rects
let svgChildEls = svgAsset.querySelectorAll("g, path, circle, rect, polygon");
function removeFills(els = svgChildEls) {
els.forEach(function (el, i) {
el.removeAttribute("fill");
});
}
function addElClass(els = svgChildEls) {
els.forEach(function (el, i) {
let nodeName = el.nodeName.toLowerCase();
if(nodeName!='g'){
el.classList.add("svgChild");
}
});
}
function toggleActive(){
svgAsset.classList.toggle('svgActive');
svgAsset.classList.toggle('svgInactive');
}svg{
display:inline-block;
width:200px;
}
/* inactive */
.svgInactive{
fill: #ccc;
}
.svgActive{
fill: orange;
}
.svgActive
.svgChild{
fill: blue;
}<p>
<button onclick="toggleActive()">toggle active</button>
<button onclick="removeFills()">Remove fill attributes</button>
<button onclick="addElClass()">Add element Class</button>
</p>
<div class="svgWrp">
<svg class="svgAsset svgInactive" viewBox="0 0 100 100">
<path id="path0" fill="red" d="M0 0 l50 0 l0 50 l-50 0 z" />
<path id="path1" class="hasClass" fill="green" d="M33 33 l50 0 l0 50 l-50 0 z" />
<g fill="purple">
<circle id="" cx="66.666%" cy="33.333%" r="25%" fill="none" stroke="#000" stroke-width="2" />
</g>
</svg>
</div><g>了元素和其他形狀圖元，例如多邊形：
let svgChildEls = svgAsset.querySelectorAll("g, path, circle, rect, polygon");
您可以從較低的 css 特異性中受益——因此您不需要像這樣的嵌套選擇器
svg g path{ ... }
手動檢查和優化您的 svg 源材料始終是最好的方法，因為您不能期望來自不同來源的圖形具有連貫的結構。
例如，由 GUI 應用程式生成的 svg 往往有一些古怪的標記，包括許多<g>嵌套、未使用或太多轉換（使得難以獲取或操作 x/y 偏移）等。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/414825.html
標籤：