CODEWITHSUNDEEP
htmlsvgd3.js
Sai
Sai

Reputation: 113

Compositing in svg with D3

I have been trying to create an SVG by manipulating SVG properties using d3. My objective is to place a smaller rectangle over bigger one and composite the destination using porter duffs "dst-out". Unfortunately the examples I tried are not working in my browser. Not sure if it's because of the SVG spec. Here is the code that I have been messing around with 

    svg.append("g").attr("id","content").append("svg:rect").
        attr("x",0).
        attr("y",200).
        attr("height",100).
        attr("width", width-20).
        attr("fill", "#2d578b");

        d3.select("#chartLaser svg").select("#content").append("svg:rect").
        attr("x",-50).
        attr("y",250).
        attr("height",30).
        attr("width",80).
        attr("fill", "#FF0066").attr("comp-op","src-atop");

Any help leading to a solution would be appreciated. Thanks in advance.

Upvotes: 0

Views: 601

Answers (3)

Sai
Sai

Reputation: 113

I have found a fragile solution to my question. The best method I have found so far to execute such kind of operations is to use a server (I'm using node js) and convert SVG to Graphics2D using SVGSalamander. After it's converted to Graphics2d, we have a whole array of options - add, subtract, etc. After this again render it to SVG using Batik. This seems to working for me and currently the best solution I have found. Additionally you can automate this whole process by using node java

Upvotes: 0

Michael Mullany
Michael Mullany

Reputation: 31715

You can do this using an SVG Filter - which is the only way you get to use compositing in SVG 1.1

Upvotes: 1

Christopher Hackett
Christopher Hackett

Reputation: 6192

The examples on the site you cite are SVG version 1.2. Currently there is only basic support for SVG 1.1 in most browsers. If you click on any of them images it shows you the SVG version (on the page it falls back to PNG).

As you can tell now your browser probably does not support what you thought it did. There is a good round up of browser compatibility at the end of this blog post and there is a visual check of the features at this test page.

Upvotes: 1

Related Questions