时间戳

首页 > 解决方案 > 带有变量的SVG过滤器？

html - 带有变量的SVG过滤器？

问题描述

我有一个像这样实现的 SVG 辉光滤镜：

<filter id="outline">
    <feMorphology in="SourceAlpha" operator="dilate" radius="2"></feMorphology>
    <feGaussianBlur stdDeviation="1" result="dilated"></feGaussianBlur>
    <feFlood style="flood-color: #RRGGBB"></feFlood>
    <feComposite in2="dilated" operator="in"></feComposite>
    <feMerge>
        <feMergeNode></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
</filter>

这很好用，但仅适用于一种特定的发光颜色。

我希望能够具有任意的发光颜色，以某种方式将变量传递给flood-color属性。

我尝试过使用currentColor，但这似乎是定义过滤器时的颜色，而不是应用它时的颜色。

我可以为每种颜色定义一个过滤器（数量有限），但只需要定义一次会更好——当然也更节省空间。这可能吗？如果可以，怎么办？

标签： htmlcsssvgsvg-filters

解决方案

在下一个示例中，这flood-color是当前颜色。如果单击 svg 元素，则切换类“蓝色”。colorsvg 元素的red颜色.blue是蓝色。

当您切换蓝色类时，过滤器正在更改泛色。

test.addEventListener("click",()=>{
  test.classList.toggle("blue")
})
svg {
  border: 1px solid;
  font-size: 40px;
  text-anchor: middle;
  dominant-baseline: middle;
  width:100px;
  color:red;
}

.blue{color:blue;}
<svg id="test"  viewBox="0 0 100 70">
  
  <filter id="outline">
    <feMorphology in="SourceAlpha" operator="dilate" radius="2"></feMorphology>
    <feGaussianBlur stdDeviation="1" result="dilated"></feGaussianBlur>
    <feFlood style="flood-color: currentcolor"></feFlood>
    <feComposite in2="dilated" operator="in"></feComposite>
    <feMerge>
        <feMergeNode></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
</filter>
  
<text x="50" y="40" filter="url(#outline)">click</text>
  
</svg>

推荐阅读