You are making the polygon with in the rect DOM which is incorrect You should be attaching the polygon to the svg So it should be


corrected code below:

var svgContainer ="body").append("svg")

var rectangle = svgContainer.append("rect")
                              .style("stroke", "black")
                              .style("fill", "none")
                             .attr("x", 50)
                            .attr("y", 50)
                           .attr("width", 100)
                          .attr("height", 100);

var cir =   svgContainer.append("polygon")       // attach a polygon to the svg
    .style("stroke", "black")  // colour the line
    .style("fill", "none")     // remove any fill colour
    .attr("points", "30,50,100,150,100,150");  // x,y points 

Working fiddle here

To make the polygon appear within the rectangle you will need to provide the polygon points/coordinates accordingly. Just by making the polygon within the rect DOM element will not make it show withing the rectangle. Hope this clears your concern.

Related Query