我正在使用 GeneratePress 和 GenerateBlocks 在 WordPress 上創建網站。
我有四個文本塊，我想在上面有一個 SVG 圖示。我從 iStock 購買了這些圖示，三個作為包裝的一部分，而澳大利亞圖示是分開的。GenerateBlocks 有一個方便的 SVG 圖示選擇器，您只需將 SVG html 粘貼到框中，它就會出現在正確的位置。
我遇到的問題是當我添加第四個 SVG 圖示時。當我這樣做時，其余部分變得透明，這不是我想要的。 （沒有第四個圖示） （有第四個圖示）
下面是第四個 SVG 圖示的代碼，我將它放在最左邊的位置：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.88 25.7">
<defs>
<style>
.cls-1,.cls-2,.cls-3,.cls-4{
fill:none;stroke:#3b383f;stroke-linejoin:round;
}
.cls-1,.cls-3{
stroke-linecap:square;
}
.cls-1,.cls-2{
opacity:0.1;
}
</style>
</defs>
<g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polyline class="cls-1" points="19.78 22.65 19.78 25.2 1.2 25.2 1.2 1.2 15.83 1.2 19.78 5.25 19.78 9.51"/><polyline class="cls-2" points="15.83 1.2 15.83 5.15 19.78 5.15"/><path class="cls-2" d="M11.6,17.49a5.62,5.62,0,1,1,7.88,1.07A5.63,5.63,0,0,1,11.6,17.49Z"/><line class="cls-2" x1="20.15" y1="20.09" x2="19.18" y2="18.81"/><path class="cls-2" d="M19.19,21.17l2.26-1.72,1,1.38,1.6,2.09a1.43,1.43,0,0,1-.27,2h0a1.43,1.43,0,0,1-2-.27l-.91-1.2Z"/><line class="cls-1" x1="13.24" y1="16.24" x2="14.58" y2="16.24"/><line class="cls-1" x1="13.2" y1="11.93" x2="14.47" y2="11.93"/><line class="cls-1" x1="12.5" y1="14.09" x2="15.21" y2="14.09"/><line class="cls-1" x1="3.87" y1="6.87" x2="3.87" y2="21.3"/><line class="cls-1" x1="3.87" y1="7.61" x2="6.37" y2="7.61"/><line class="cls-1" x1="3.87" y1="11.93" x2="8.77" y2="11.93"/><line class="cls-1" x1="3.87" y1="9.77" x2="7.6" y2="9.77"/><line class="cls-1" x1="3.87" y1="16.24" x2="8.56" y2="16.24"/><line class="cls-1" x1="3.87" y1="14.09" x2="8.07" y2="14.09"/><line class="cls-1" x1="3.87" y1="18.4" x2="9.71" y2="18.4"/><line class="cls-1" x1="3.87" y1="20.56" x2="7.31" y2="20.56"/><polyline class="cls-3" points="19.08 21.95 19.08 24.5 0.5 24.5 0.5 0.5 15.13 0.5 19.08 4.55 19.08 8.81"/><polyline class="cls-4" points="15.13 0.5 15.13 4.45 19.08 4.45"/><path class="cls-4" d="M10.9,16.79a5.62,5.62,0,1,1,7.88,1.07A5.63,5.63,0,0,1,10.9,16.79Z"/><line class="cls-4" x1="19.45" y1="19.39" x2="18.48" y2="18.11"/><path class="cls-4" d="M18.49,20.47l2.26-1.72,1,1.38,1.6,2.09a1.43,1.43,0,0,1-.27,2h0a1.43,1.43,0,0,1-2-.27l-.91-1.2Z"/><line class="cls-3" x1="12.54" y1="15.54" x2="13.88" y2="15.54"/><line class="cls-3" x1="12.5" y1="11.23" x2="13.77" y2="11.23"/><line class="cls-3" x1="11.8" y1="13.39" x2="14.51" y2="13.39"/><line class="cls-3" x1="3.17" y1="6.17" x2="3.17" y2="20.6"/><line class="cls-3" x1="3.17" y1="6.91" x2="5.67" y2="6.91"/><line class="cls-3" x1="3.17" y1="11.23" x2="8.07" y2="11.23"/><line class="cls-3" x1="3.17" y1="9.07" x2="6.9" y2="9.07"/><line class="cls-3" x1="3.17" y1="15.54" x2="7.86" y2="15.54"/><line class="cls-3" x1="3.17" y1="13.39" x2="7.37" y2="13.39"/><line class="cls-3" x1="3.17" y1="17.7" x2="9.01" y2="17.7"/><line class="cls-3" x1="3.17" y1="19.86" x2="6.61" y2="19.86"/></g></g></svg>任何反饋都將不勝感激，這已經困擾了我一段時間。
干杯
uj5u.com熱心網友回復：
因為定義是全域的；
opacity:0.1 將應用于所有帶有類cls-1和cls-2頁面中的元素。
<style>也許最簡單的解決方法是使用具有更高特異性的額外標簽“恢復”所有內容。否則，您必須更改 SVG 以使用獨特的類
或者將你的 SVG 放在 shadowRoot 中，這樣所有的 SVG CSS 都變成“本地的”并且不會泄漏到全域 DOM。有關示例，請參見
<load-file>Web 組件
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/421763.html
標籤：
上一篇：嵌套SVG的對齊方式