2

I'm looking to see if there's a utility way to take a given svg element and find the corresponding path. The intent is to be able to trace an outline of the object similar to http://jsfiddle.net/Lqmzztw1/. I'd like to use a technique illustrated http://bl.ocks.org/duopixel/4063326 here since it seems to be close to what I want. I'm looking for this to be able to trace the outline of any polygon/shape/circle, etc. Is there a way to convert a given SVG element to its corresponding path in d3?

fiddle code

var svg = d3.selectAll('div').append('svg').attr({
    height:500,
    width: 500
});

var box = svg.append('rect').attr({
    x: 20,
    y: 20,
    height:50,
    width:50,
    fill: 'blue'
});

box.on('click',function(){

    var cornerBox = svg.append('rect').attr({
        x:15,
        y:15,
        width:10,
        height:10,
        fill:'orange'
    });

    cornerBox.transition().attr({
        x: 50+15
    }).duration(150).transition().attr({
        y: 50+15
    }).transition().attr({
        x:15
    }).duration(150).transition().attr({
        y:15
    }).duration(150);
});
wootscootinboogie
  • 8,461
  • 33
  • 112
  • 197
  • D3 doesn't provide any functionality for this, but [this question](http://stackoverflow.com/questions/10717190/convert-svg-polygon-to-path) may help. – Lars Kotthoff May 06 '15 at 18:37
  • @LarsKotthoff i see your name a lot on these d3 questions on SO, and like Batman, you show up when there's troubl! :) – wootscootinboogie May 06 '15 at 18:40

0 Answers0