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

Solution 1:

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.

Solution 2:

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

Solution 3:

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