JSFiddle - React, Tailwind, and code Playground

by Ryan Duffy

CSS

.SvgObject{
        width:100%;
        height: 100%;
}

JavaScript

enyo.kind({
    name: "App",
    kind: enyo.Control,
    //fit: true,
    published: {
        source: ''
    },
    components: [
        {tag: "svg", name: "svgObject", classes: "SvgObject", xmlns: "http://www.w3.org/2000/svg", version: "1.1", components: [
            {tag: "ellipse",
                attributes:{
                        cx: 100,
                        cy: 100,
                        rx: 50,
                        ry: 50,
                        style: "fill:blue"
                },
                ontap: "tapHandler"
            }
        ]}
    ],
    rendered: function() {
        this.inherited(arguments);
        this.sourceChanged();
    },
    sourceChanged: function() {
        var svgObj = this.$.svgObject;
        svgObj.setAttribute("type", 'image/svg+xml');
        svgObj.setAttribute("data", this.source);
    },

    loadHandler: function(inSender, inEvent) {
        console.log('loadedhandler');
    },
    tapHandler: function(inSender, inEvent) {
        alert('klikhandler');
    }
});

new App({
    source: 'http://croczilla.com/bits_and_pieces/svg/samples/arcs1/arcs1.svg'
}).write();