intersecting svg closed paths

Question

What is a good way (both code-wise and performance-wise) to test if two shapes drawn by svg path is intersecting? I am doing this in d3 and is using the "cardinal-closed" line interpolation

More specifically, I am creating convex hulls (more complex than in the image), and I want to merge hulls if they overlap. It is easy to do if I use a "linear-closed" interpolation, because then I can use the vertices to calculate intersections, but the "cardinal-closed" interpolation looks better where I use it.

var v1 = [[100,100],[200,100],[200,200],[100,200]],
v2 = [[210,100],[310,100],[310,200],[210,200]];

var hull1 = d3.geom.hull(v1),
    hull2 = d3.geom.hull(v2);

var svg = d3.select("#foo")
    .append("svg");

var line = d3.svg.line()
    .interpolate("cardinal-closed")
    .x(function(d) {return d[0];})
    .y(function(d) {return d[1];});

svg.append("path")
    .attr("d", line(hull1));
svg.append("path")
    .attr("d", line(hull2));

Here is a jsfiddle. How do I test if these shapes are intersecting/overlapping?

Answer 1

As @Phrogz said you should probably use the intersection library.