将 CSS 过滤器转换为 SVG 过滤器

Question

我可以根据需要在<img />元素上使用 CSS 过滤器。

例如。

filter: brightness(1) contrast(67%) saturate(250%) grayscale(0%) invert(0%) hue-rotate(330deg) sepia(40%) blur(0px);

我的目标是将相同的过滤器属性应用于 SVG 文件中的<image />标签。

然而事情像

<g style="-webkit-filter: contrast(67%) saturate(250%);">
    <image xlink:href="image.jpg" />
</g>

或

<image xlink:href="image.jpg" style="-webkit-filter: contrast(67%) saturate(250%) sepia(40%)"/>

不起作用。

所以很可能我必须将 CSS 过滤器组合为 SVG 过滤器。

在 webplatform.org 上，我发现了 SVS 对特定 CSS 过滤器效果的表示，例如：

• 反转： https : //docs.webplatform.org/wiki/css/functions/invert

然后我尝试将生成的过滤器与feMerge结合起来。

<filter id="clip_1-filter-90117969876336">
    <feComponentTransfer in="SourceGraphic" result="brightness-filter">
      <feFuncR type="linear" slope="22"></feFuncR>
      <feFuncG type="linear" slope="22"></feFuncG>
      <feFuncB type="linear" slope="22"></feFuncB>
    </feComponentTransfer>

    <feComponentTransfer in="brightness-filter" result="contrast-filter">
      <feFuncR type="linear" slope="-15" intercept="7"></feFuncR>
      <feFuncG type="linear" slope="-15" intercept="7"></feFuncG>
      <feFuncB type="linear" slope="-15" intercept="7"></feFuncB>
    </feComponentTransfer>

    <feColorMatrix in="contrast-filter" result="grayscale-filter" type="matrix" values="
       1 0 0 0 0
       0 1 0 0 0
       0 0 1 0 0
       0 0 0 1 0"></feColorMatrix>

    <feComponentTransfer in="SourceGraphic" result="invert-filter">
      <feFuncR type="table" tableValues="0 1"></feFuncR>
      <feFuncG type="table" tableValues="0 1"></feFuncG>
      <feFuncB type="table" tableValues="0 1"></feFuncB>
    </feComponentTransfer>

    <feMerge>
      <feMergeNode in="grayscale-filter"></feMergeNode>
    </feMerge>
    </filter>

然而，结果远非预期。

将 CSS 过滤器转换为 SVG 的正确方法是什么？

Answer 1

您的过滤器看上去大多是正确的，但我怀疑有一个错字在你feComponentTransfer in属性。 我想你的意思可能是：

<feComponentTransfer in="grayscale-filter" result="invert-filter">

请注意，如果每个阶段的输入是最后一个阶段的输出，则不需要使用result和in 。

此外，如果只有一个节点，则不需要最后的feMerge 。

 <svg width="5cm" height="5cm" viewBox="0 0 500 500"> <defs> <filter id="clip_1-filter-90117969876336"> <feComponentTransfer in="SourceGraphic"> <feFuncR type="linear" slope="22"></feFuncR> <feFuncG type="linear" slope="22"></feFuncG> <feFuncB type="linear" slope="22"></feFuncB> </feComponentTransfer> <feComponentTransfer> <feFuncR type="linear" slope="-15" intercept="7"></feFuncR> <feFuncG type="linear" slope="-15" intercept="7"></feFuncG> <feFuncB type="linear" slope="-15" intercept="7"></feFuncB> </feComponentTransfer> <feColorMatrix type="matrix" values=" 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix> <feComponentTransfer> <feFuncR type="table" tableValues="0 1"></feFuncR> <feFuncG type="table" tableValues="0 1"></feFuncG> <feFuncB type="table" tableValues="0 1"></feFuncB> </feComponentTransfer> </filter> </defs> <image xlink:href="http://lorempixel.com/500/500/" width="500" height="500" filter="url(#clip_1-filter-90117969876336)"/> <rect fill="none" stroke="blue" x="1" y="1" width="498" height="498"/> </svg>

Answer 2

您的 feColorMatrix 目前是单位矩阵，而不是灰度过滤器，而您的第三个 feComponentTransfer 也是单位变换（即 (0 1) 保留所有颜色原样 - 您可能是指 (1 0)）。

我不知道上次合并的意图是什么。 您想将反演结果与灰度混合吗？ 或者你想反转你的灰度。

查看feColorMatrix的Web 平台文档和我为 .NET mag 编写的介绍文章以开始使用。 在那之后，我建议阅读罗伯特在评论中链接到的规范。