| <!DOCTYPE html> |
| <html> |
| <body> |
| <svg id="svg" width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> |
| <rect width="100" height="100" fill="red"/> |
| </svg> |
| |
| <script> |
| var img = document.createElementNS('http://www.w3.org/2000/svg', 'image'); |
| img.setAttribute('width', '100'); |
| img.setAttribute('height', '100'); |
| img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'data:image/svg+xml,' + |
| '<svg xmlns="http://www.w3.org/2000/svg">' + |
| ' <rect width="100" height="100" fill="green"/>' + |
| '</svg>'); |
| |
| var inactive_doc = document.implementation.createDocument ('http://www.w3.org/1999/xhtml', 'html', null); |
| // First, insert into an inactive doc. |
| inactive_doc.documentElement.appendChild(img); |
| // Then re-insert into the current doc. |
| document.getElementById('svg').appendChild(img); |
| </script> |
| </body> |
| </html> |
