SVG Experiment

by Stephen Dunne

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

<input type="button" id=btnAction value=Click>
<hr>

<div id="console">
</div>

<svg id="panel" width="300" height="300" stroke="black" stroke-width="3">
  <!--circle id="c1" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /-->
   <!--polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" /-->
  <rect id="s1" x="150" y="150" height="48" width="48" rx="10" ry="10" stroke="black" stroke-width="3" fill="yellow" />
  
</svg>

JavaScript

function CreateSquare(){
	
}

$(document).ready(function(){
	$("#btnAction").click(function(){
    var square = $("#s1");
    var panel = $("#panel");
		$("#console").text("Found " + panel.length);
  	
    for(i = 0; i < 3 ; i++){
	    for(j = 0; j < 3 ; j++){
				var newSquare = document.createElementNS('http://www.w3.org/2000/svg', "rect");
        
//        $('<rect  height="48" width="48" rx="10" ry="10" stroke="black" stroke-width="3" fill="yellow" />')
        $(newSquare).attr("id", "sq_" + i + "_" + j)
        				.attr("x", i * 50)
                .attr("y", j * 50)
                .attr("height", 45)
                .attr("width", 45)
                .attr("rx", 10)
                .attr("ry", 10)
                .attr("stroke", "black")
                .attr("stroke-width", 3)
                .attr("fill", "yellow");
        
        panel.append(newSquare);
      }  	
    }
		//square.attr("fill", "red");
  });
});