网站上的SVG图标正在变得透明。

Question

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

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

我的问题是当我添加第四个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>

​

任何反馈都会很感激，这已经困扰了我一段时间了。

干杯

Answer 1

因为定义是全球性的；

不透明度:0.1将应用于所有元素，“在您的页面中有类cls-1、和 cls-2 ”。

• 也许最简单的解决方法是用一个额外的具有更高特异性的<style>标记来“恢复”所有东西。
• 否则，您必须将SVG更改为使用唯一的类。
• 或者把你的SVG放到一个shadowRoot中，这样所有的SVG就变成了“本地的”，不会泄漏到全局DOM中。有关示例，请参见Web组件