网站上的 SVG 图标变得透明

Question

我正在使用 GeneratePress 和 GenerateBlocks 在 WordPress 上创建一个网站。

我有四个文本块，我希望上面有一个 SVG 图标。我从 iStock 购买了这些图标，三个作为一个包的一部分，澳大利亚图标是分开的。 GenerateBlocks 有一个方便的 SVG 图标选择器，您只需将 SVG html 粘贴到框中，它就会出现在正确的位置。

我遇到的问题是当我添加第四个 SVG 图标时。当我这样做时，其余部分变得透明，这不是我想要的。 (Without fourth icon) (With fourth icon)

下面是第四个 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>

非常感谢任何反馈，这已经困扰我一段时间了。

干杯

Answer 1

因为定义是全局的；

opacity:0.1 将应用于页面中具有类 cls-1 和 cls-2 的所有元素。

也许最简单的解决方法是使用具有更高特异性的额外 <style> 标签“恢复”所有内容。
否则您必须更改 SVG 以使用唯一类
或者将您的 SVG 放在 shadowRoot 中，以便所有 SVG CSS 成为“本地”并且不会泄漏到全局 DOM。示例见 <load-file> Web Component

网站上的 SVG 图标变得透明

SVG icons on website are turning transparent

html

css

svg