如何在 svg 过滤器的 feflood 标签中使用变量？答案

【问题标题】：How to use variables in svg filter's feflood tag?如何在 svg 过滤器的 feflood 标签中使用变量？
【发布时间】：2022-01-26 06:17:11
【问题描述】：

我有以下代码

<filter x="-0.1" y="-0.1" width="1.2" height="1.3" id="color_available">
          <feFlood flood-color="#306b34" result="bg" />
             <feMerge>
                <feMergeNode in="bg" />
                <feMergeNode in="SourceGraphic" />
             </feMerge>
    </filter>
    <text filter="url(#color_available)">
          <tspan>Sample text</tspan>
    </text>

现在我想使用我的 component.ts 文件中的动态颜色类似的东西

<filter x="-0.1" y="-0.1" width="1.2" height="1.3" id="color_available">
          <feFlood flood-color="{{bgColor}}" result="bg" />
             <feMerge>
                <feMergeNode in="bg" />
                <feMergeNode in="SourceGraphic" />
             </feMerge>
    </filter>
    <text filter="url(#color_available)">
          <tspan>Sample text</tspan>
    </text>

并且这个 bgColor 将在 component.ts 文件中分配一些默认值。我怎样才能在 angular9 中做到这一点？

我也尝试过添加方法，但没有成功。

【问题讨论】：

标签： angularjs svg text svg-filters

【解决方案1】：

尝试了太多次，我自己得到了答案。

<filter x="-0.1" y="-0.1" width="1.2" height="1.3" id="color_available">
                    <feFlood [attr.flood-color]="bgColor" result="bg" />
                    <feMerge>
                      <feMergeNode in="bg" />
                      <feMergeNode in="SourceGraphic" />
                    </feMerge>
                  </filter>

只需添加 [attr.flood-color]="bgColor" 即可获取变量的值。

【讨论】：