如何在 SVG 中为特定部分制作透明颜色代码

Posted

技术标签:

【中文标题】如何在 SVG 中为特定部分制作透明颜色代码【英文标题】:How to make Transparent Color Code in SVG for a particular section 【发布时间】:2020-04-07 19:32:38 【问题描述】:

我似乎无法让我的 SVG 图像的特定部分透明。整个图像是,但文本内的区域,如 d 和 o 内的区域不会改变。我尝试了许多代码组合,但都没有奏效。我对代码不太熟悉,希望得到一些帮助。这是 astricts 中的代码部分,下面加粗 - 谢谢

<path d="M 164.06 634.94 C 166.18 637.14 166.77 639.77 167.64 642.60 C 158.53 642.89 149.39 642.68 140.26 642.71 C 141.22 639.96 141.97 637.19 143.96 634.97 C 149.13 629.43 158.91 629.32 164.06 634.94 Z" fill="#XXFFFFFF></path>

【问题讨论】:

你试过这个***.com/questions/6042550/… 当它工作时标记为已解决。 @Ion 响应 (fill-opacity="0.4") 应该可以工作。 我试了 fill-opacity="0.4" 变灰了,我试了 fill-opacity="0" 变白了。 【参考方案1】:

只需使用“透明”作为颜色。您还可以使用#RRGGBBAA 将颜色设置为部分透明,其中 AA 是颜色的 alpha(00 表示透明,FF 表示完全不透明)。

<p style="background: linear-gradient(18deg, black, transparent);">
  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 640 480"> 
    <path fill="transparent" d="M0 0h640v160H0z"></path> 
    <path fill="#F0F0F050" d="M0 160h640v160H0z"></path> 
    <path d="M0 320h640v160H0z"></path> 
    <path fill="red" d="M0 0h220v480H0z"></path> 
  </svg>
</p>

【讨论】:

以上是关于如何在 SVG 中为特定部分制作透明颜色代码的主要内容,如果未能解决你的问题,请参考以下文章

当我在代码中使用特定的 svg 时,所有 svg 的颜色都会变为红色

如何设置 D3.js svg 的背景颜色?

如何在图像上制作半透明颜色?

如何在 d3.js 中为颜色图例添加刻​​度线

svg图标无法修改颜色的解决方案

如何在 Swift 中为资产颜色设置 alpha