带变量的SVG过滤器? [英] SVG filter with variable?

问题描述

我有一个像这样实现的 SVG 发光过滤器:

I have an SVG glow filter implemented like so:

<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>

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

This works nicely, but only for one specific glow colour.

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

I would like to be able to have an arbitrary glow colour, in some way passing a variable in to the flood-color property.

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

I have tried using currentColor, but this seems to be the colour as it is when the filter is defined, not when it is applied.

我可以为每种颜色定义一个过滤器(它们的数量将是有限的)，但它会更好 - 当然更节省空间 - 只需要定义一次.这可能吗?如果可能，怎么办?

I could define a filter for each colour (there will be a limited number of them) but it would be nicer - and certainly more space-efficient - to only need to define it once. Is this possible and if so how?

推荐答案

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

In the next example the flood-color is the current color. If you click the svg element you toggle the class "blue". The color of the svg element is red the color of the .blue is blue.

当您将类切换为蓝色时，过滤器会更改泛光颜色.

When you toggle the class blue the filter is changing the flood color.

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>

这篇关于带变量的SVG过滤器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！