How to add an inline svg behind an iframe object?

@jasen_gottlieb 

To add an inline SVG behind an iframe object, you can use CSS to position the SVG element behind the iframe. Here's an example of how you can do this:

1. Create the inline SVG element:

1
2
3

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <rect width="100%" height="100%" fill="blue" />
</svg>

1. Add the iframe and position it above the SVG using CSS:

1
2
3
4
5
6

<div style="position:relative;">
  <iframe src="https://example.com" style="position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;"></iframe>
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="position:absolute; top:0; left:0; z-index:0;">
    <rect width="100%" height="100%" fill="blue" />
  </svg>
</div>

In this example, the SVG element is positioned behind the iframe by setting its z-index to a lower value than the iframe's z-index. The SVG element will serve as the background behind the iframe. You can customize the styles of the SVG element and the iframe as needed to achieve the desired look.