Search code examples
javascripthtmlsvgappendrect

i need help append rect a few deep

ok so im trying to append two orange rect within a green rect within a black svg tag. the black works and the green works, however the orange shape does not work. any suggestions on why? HTML:

<!DOCTYPE html> 
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tetris(test)</title> 
    <link rel="stylesheet" href="styleSheets/main.css">
    <script src = "https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src = "js/jquery.1.js"></script>
    <script src = "js/main.js"></script>
  </head>
  <body>
      <svg id="container" width= "500" height= "650" style= "background-color: black" position= "relative">
      </svg>

  </body>
</html>

JS:

var svgNS = "http://www.w3.org/2000/svg";
var htmlNS = "http://www.w3.org/1999/xhtml";

function createRect() {
    var elem = document.getElementById("container");
    var shape = document.createElementNS(svgNS, "rect");
        shape.id = "shape1";
        shape.style.width = "150px";
        shape.style.height = "100px";
        shape.style.fill = "green";
        shape.style.position = "relative"
        elem.append(shape);
        var rec = document.createElementNS(svgNS, "rect");
            rec.id = "box1";
            rec.style.width = "150px";
            rec.style.height = "50px";
            rec.style.fill = "orange";
            rec.style.y = "50px";
            rec.style.position = "absolute";
            shape.append(rec);
        var rec2 = document.createElementNS(svgNS, "rect");
            rec2.id = "box2";
            rec2.style.width = "50px";
            rec2.style.height = "51px";
            rec2.style.fill = "orange";
            rec2.style.x = "50px";
            shape.append(rec2);
}
window.onload = createRect;

so within the green rectangle there should be an orange shape that looks like an upside down T. any suggestions would be greatly appreciated.

Solution

  • You have to add rectangles inside the SVG tags so I added the line 

     const svg = document.querySelector("svg");  


    var svgNS = "http://www.w3.org/2000/svg";
var htmlNS = "http://www.w3.org/1999/xhtml";

function createRect() {
    var elem = document.getElementById("container");
     var shape = document.createElementNS(svgNS, "rect"); 
	const svg = document.querySelector("svg");
        <!-- shape.id = "shape1"; -->
        shape.style.width = "150px";
        shape.style.height = "100px";
        shape.style.fill = "green";
        shape.style.position = "relative"
		<!-- elem.append(shape); -->
        svg.append(shape);
        var rec = document.createElementNS(svgNS, "rect");
            <!-- rec.id = "box1"; -->
            rec.style.width = "150px";
            rec.style.height = "50px";
            rec.style.fill = "orange";
            rec.style.y = "50px";
            rec.style.position = "absolute";
			<!-- shape.append(rec); -->
            svg.append(rec);
        var rec2 = document.createElementNS(svgNS, "rect");
            <!-- rec2.id = "box2"; -->
            rec2.style.width = "50px";
            rec2.style.height = "51px";
            rec2.style.fill = "orange";
            rec2.style.x = "50px";
            <!-- shape.append(rec2); -->
			svg.append(rec2);
}
window.onload = createRect;
    <!DOCTYPE html> 
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tetris(test)</title> 
    <link rel="stylesheet" href="styleSheets/main.css">
    <script src = "https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src = "js/jquery.1.js"></script>
    <script src = "js/main.js"></script>
  </head>
  <body>
      <svg id="container" width= "500" height= "650" style= "background-color: black" position= "relative">
      </svg>

  </body>

    Inside the SVG there is only absolute positioning. Therefore, if you want the orange rectangles to be on top, you need to add them later than the green rectangles

    This is how it looks in the pure SVG 

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	     width="500" height="650" viewBox="0 0 500 650"  >  
  		 
<rect width="100%" height="100%" fill="black" />
 <rect  width="150" height="100"  fill="green" />
  <rect  y="50" width="150" height="50"  fill="orange" />
     <rect  x="50" width="50" height="51"  fill="orange" />
</svg>