D3 中的 svg 亮度过滤器

Question

我需要转换以下 svg 过滤器（因为我不能依赖纯 css 过滤器）

<filter id="brightness">
  <feComponentTransfer>
    <feFuncR type="linear" slope="2"/>
    <feFuncG type="linear" slope="2"/>
    <feFuncB type="linear" slope="2"/>
  </feComponentTransfer>
</filter>

在 D3 代码中。但是下面的代码（JSFiddle 这里）不起作用：

const svg = d3.select("svg")

var filter = svg.append("defs")
.attr("id", "brightness")
.append("feComponentTransfer")
filter.append("feFuncR").attr("type","linear").attr("slope","2");
filter.append("feFuncG").attr("type","linear").attr("slope","2");
filter.append("feFuncB").attr("type","linear").attr("slope","2");

var circle=svg.append("circle")
.attr("cx",100)
.attr("cy",100)
.attr("r",100)
.attr("fill","red")
.style("fill", "url(#brightness)");

也许最后两行冲突。我该如何更正？

Answer 1

您将 id 放在 defs 元素上，而不是过滤器。
你实际上没有滤芯
您正在使用填充而不是过滤器在圆上指定过滤器。

一旦你解决了所有问题，你就会得到这个...

const svg = d3.select("svg")
    
        var filter = svg.append("defs")
         .append("filter")
        .attr("id", "brightness")
        .append("feComponentTransfer")
    filter.append("feFuncR").attr("type","linear").attr("slope","2");
        filter.append("feFuncG").attr("type","linear").attr("slope","2");
    filter.append("feFuncB").attr("type","linear").attr("slope","2");
    
    var circle=svg.append("circle")
    .attr("cx",100)
    .attr("cy",100)
    .attr("r",100)
    .attr("fill", "red")
    .attr("filter", "url(#brightness)");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>

D3 中的 svg 亮度过滤器

svg brightness filter in D3

javascript

svg

d3.js

svg-filters