D3中的svg亮度过滤器答案

【问题标题】：svg brightness filter in D3D3中的svg亮度过滤器
【发布时间】：2019-08-17 09:47:20
【问题描述】：

我需要转换以下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)");

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

【问题讨论】：

标签： javascript d3.js svg svg-filters

【解决方案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>

【讨论】：