网站上的 SVG 图标变得透明答案

【问题标题】：SVG icons on website are turning transparent网站上的 SVG 图标变得透明
【发布时间】：2022-01-20 15:15:57
【问题描述】：

我正在使用 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>

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

干杯

【问题讨论】：

请提供代码笔、片段或实时链接。这还不足以理解问题
大概这些图标没有不同的 id 值或类，因此当您在页面上放置多个图标时，它们会发生冲突。
因为<style> 定义是全局的； opacity:0.1 将应用于页面中的所有元素 cls-1 和 cls-2。也许最简单的解决方法是使用具有更高特异性的额外 <style> 标签“恢复”所有内容。
@Danny'365CSI'Engelman 这很准确，如果您想将其添加为答案以便我接受，那就太好了。

标签： html css svg

【解决方案1】：

因为定义是全局的；

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

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

【讨论】：