JSFiddle - React, Tailwind, and code Playground

by kapantzak

HTML

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <body>
       <svg 
        xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink" 
        id="test1" 
        height="200px" 
        width="200px">
            <image 
            id="testimg1" 
            xlink:href="http://i.imgur.com/LQIsf.jpg" 
            width="100" 
            height="100" 
            x="0" 
            y="0"/>
        </svg> 
            
        <hr />
            
        <p id="testP1">
            
            
        </p>
        <hr />      
        <p id="testP2">
            
            
        </p>        
    </body>
</html>

JavaScript

var paper = Raphael(document.getElementById("testP1"), 200, 200);
paper.image("http://i.imgur.com/LQIsf.jpg", 0,0, 100, 100);

var svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
//svg.setAttribute('xmlns:xlink','http://www.w3.org/1999/xlink');
svg.setAttribute('height','200');
svg.setAttribute('width','200');
svg.setAttribute('id','test2');

var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');
svgimg.setAttribute('height','100');
svgimg.setAttribute('width','100');
svgimg.setAttribute('id','testimg2');
svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href','http://i.imgur.com/LQIsf.jpg');
svgimg.setAttribute('x','0');
svgimg.setAttribute('y','0');

svg.appendChild(svgimg);

document.querySelector('#testP2').appendChild(svg);