CODEWITHSUNDEEP
htmlcsssvg
Geeky
Geeky

Reputation: 33

How to embed svg into svg?

I have to perform this task in which i have to embed one svg into another svg. As I am new to SVG, I have done the polygon and rectangle part but while combining these two I am facing issues. I am attaching my work up to which I have completed.

Upvotes: 0

Views: 166

Answers (2)

enxaneta
enxaneta

Reputation: 33044

In order to embed one svg into another svg you have to use it the same way you would use a <symbol> element.

const SVG_NS = 'http://www.w3.org/2000/svg';
let colors = [
  "rgb(255,128,0)",
  "rgb(255,128,0)",
  "rgb(255,128,0)",
  "rgb(255,128,0)",
  "rgb(255,128,0)",
  "rgb(255,128,0)",
  "rgb(255,128,0)",
  "rgb(102,204,0)",
  "rgb(102,204,0)",
  "rgb(102,178,255)"
];


let angle = Math.atan2(215,430);
let n = 0;
let offset = 10;// distance between the border of the triangle and the start of the rectangle

for(let y = 40; y < 430; y+= 40){
  
  let halfW = Math.tan(angle)*y - offset;
  let o = {
    x:430/2 - halfW,
    y: y,
    width: 2*halfW,
    height: 30,
    fill:colors[n]
  }
  
  drawRect(o, polys);
  n++;
}

function drawRect(o, parent) {

  let rect = document.createElementNS(SVG_NS, 'rect');
  for (var name in o) {
    if (o.hasOwnProperty(name)) {
      rect.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(rect);
  return rect;
}
svg{max-width:100vh}
<svg viewBox="0 0 600 600" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="400" height="30" y="40">
  <rect width="300" height="30" style="fill:rgb(255,0,0);" />
   <text x="0" y="15" fill="white">Fatality</text>
</svg>
<svg width="400" height="30" y="80">
   <rect width="300" height="30" style="fill:rgb(255,0,0);" />
   <text x="0" y="15" fill="white">Lost Time Incidents</text>
</svg>
<svg width="400" height="30" y="120">
  <rect width="300" height="30" style="fill:rgb(255,128,0);" />
   <text x="0" y="15" fill="white">Restricted Work Cases</text>
</svg> 
  <svg width="400" height="30" y="160">
  <rect width="300" height="30" style="fill:rgb(255,128,0);" />
   <text x="0" y="15" fill="white">Medical Treatment Cases</text>
</svg>
<svg width="400" height="30" y="200">
  <rect width="300" height="30" style="fill:rgb(255,128,0);" />
   <text x="0" y="15" fill="white">First Aid Cases</text>
</svg>
<svg width="400" height="30"  y="240">
  <rect width="300" height="30" style="fill:rgb(255,128,0);" />
  <text x="0" y="15" fill="white">RTA Incident</text>
</svg>  
<svg width="400" height="30" y="280">
  <rect width="300" height="30" style="fill:rgb(255,128,0);" />
  <text x="0" y="15" fill="white">Environment Incident</text>
</svg>  
<svg width="400" height="30" y="320">
  <rect width="300" height="30" style="fill:rgb(102,204,0);" />
   <text x="0" y="15" fill="white">Near Miss</text>
</svg>  
<svg width="400" height="30" y="360">
  <rect width="300" height="30" style="fill:rgb(102,204,0);" />
   <text x="0" y="15" fill="white">Unsafe Acts & Conditions</text>
</svg>
<svg width="400" height="30" y="400">
  <rect width="300" height="30" style="fill:rgb(102,178,255);" />
   <text x="0" y="15" fill="white">Man Hours</text>
</svg>  
  
<svg id="polys" height="430" width="430" viewBox="0 0 430 430" x="160"  >
  <polygon points="215,0, 0,430 430,430 215,0" style="fill:white;stroke:red;stroke-width:1" />

</svg>  
  
</svg>

Upvotes: 0

Paul LeBeau
Paul LeBeau

Reputation: 101820

Don't have a bunch of SVGs. Instead you should just put all your shapes into one big SVG.

Below is a quick example. But remember, you might find it easier to just use one of the many available vector drawing apps to create your SVG.

<!DOCTYPE html>
<html>
<body>

<svg width="550" height="400">
  <g>
    <rect width="300" height="30" style="fill:rgb(255,0,0);" />
    <text x="10" y="20" fill="white">Fatality</text>
  </g>

  <g transform="translate(0,40)">
    <rect width="300" height="30" style="fill:rgb(255,0,0);" />
    <text x="10" y="20" fill="white">Lost Time Incidents</text>
  </g>

  <g transform="translate(0,80)">
    <rect width="300" height="30" style="fill:rgb(255,128,0);" />
    <text x="10" y="20" fill="white">Restricted Work Cases</text>
  </g>

  <g transform="translate(0,120)">
    <rect width="300" height="30" style="fill:rgb(255,128,0);" />
    <text x="10" y="20" fill="white">Medical Treatment Cases</text>
  </g>

  <g transform="translate(0,160)">
    <rect width="300" height="30" style="fill:rgb(255,128,0);" />
    <text x="10" y="20" fill="white">First Aid Cases</text>
  </g>

  <g transform="translate(0,200)">
    <rect width="300" height="30" style="fill:rgb(255,128,0);" />
    <text x="10" y="20" fill="white">RTA Incident</text>
  </g>

  <g transform="translate(0,240)">
    <rect width="300" height="30" style="fill:rgb(255,128,0);" />
    <text x="10" y="20" fill="white">Environment Incident</text>
  </g>

  <g transform="translate(0,280)">
    <rect width="300" height="30" style="fill:rgb(102,204,0);" />
    <text x="10" y="20" fill="white">Near Miss</text>
  </g>

  <g transform="translate(0,320)">
    <rect width="300" height="30" style="fill:rgb(102,204,0);" />
    <text x="10" y="20" fill="white">Unsafe Acts & Conditions</text>
  </g>

  <g transform="translate(0,360)">
    <rect width="300" height="30" style="fill:rgb(102,178,255);" />
    <text x="10" y="20" fill="white">Man Hours</text>
  </g>

  <polygon points="350,0, 550,400, 150,400" style="fill:white;stroke:black;stroke-width:1" />

</svg>

Upvotes: 1

Related Questions