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

我想在

元素上使用CSS过滤器

例如

我的目标是对SVG文件中的

标记应用相同的过滤器属性

然而

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

然而，结果与预期相差甚远

---

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

您的过滤器看起来基本正确，但我怀疑您的feComponentTransfer

在

属性中有输入错误。我想你的意思可能是：

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

---

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

我不知道上次合并的目的是什么。是否要将反转结果与灰度混合？或者你想反转你的灰度

---

请查看和以开始。之后，我建议阅读Robert在评论中链接到的规范。

CSS过滤器规范与每个CSS过滤器都有SVG等价物：Michal-我注意到您有一个不接受任何问题答案的记录。您是否意识到，通过单击要接受的问题下的复选标记，这样做是一种良好的社区行为。

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

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

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