JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<svg width='1000' height='500'>
    <a xlink:href="/svg/index.html">
    <rect y="0" x="0" rx="0"/>    
        <text x="50" y="50"  fill="red" >Contact</text>
    </a>


</svg>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto);
rect{
fill: #4656D4;    
}
html, body{
    margin: 0;
    padding: 0;
}

text{
    font-family: Roboto;
    font-size: 18px;
    letter-spacing: 3px;
    fill: white;
}

JavaScript

var opts = {
    marginX: 15 ,
    marginY: 10
}

// Get the elements
var getEl = 'getElementsByTagName',
    svg = document[getEl]('svg')[0],
    navText = svg[getEl]('text')[0];
    navBG = svg[getEl]('rect')[0];

var mgX = opts.marginX;
var mgY = opts.marginY;




// get text box
var navFontSz = parseInt(window.getComputedStyle(navText, null).getPropertyValue("font-size"),10);
var navTextWd = navText.getBBox().width + (mgX*2);
var navTextHt = navText.getBBox().height + (mgY*2);
var navTextX = navText.getAttribute('x') - mgX;
var navTextY = navText.getAttribute('y') - navFontSz - mgY;


// Get the elements attributes
navBG.setAttributeNS(null, 'width',navTextWd );
navBG.setAttributeNS(null, 'height',navTextHt );
navBG.setAttributeNS(null, 'x',navTextX );
navBG.setAttributeNS(null, 'y',navTextY );