CODEWITHSUNDEEP
javascriptd3.jssvgsvg-filters
tic
tic

Reputation: 4189

svg brightness filter in D3

I need to convert the following svg filter (since I cannot rely on pure css filter)

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

in D3 code. But the code below (JSFiddle here) does not work:

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)");

Maybe the two last lines conflict. How can I correct?

Upvotes: 0

Views: 676

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

  1. You're putting the id on the defs element, not the filter.
  2. You don't actually have a filter element
  3. You're specifying the filter on the circle using fill rather than filter.

Once you've fixed all that you'd get this...

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>

Upvotes: 4

Related Questions