JSFiddle - React, Tailwind, and code Playground

by bergb

HTML

<svg xmlns="http://www.w3.org/2000/svg" >
<!--<g>
  <rect x="0" y="0"height="100" fill="red" id="rt" ></rect>
  <text x="2" y="10" font-family="Verdana" font-size="10" fill="blue" alignment-baseline="middle" id="hello"> Hello </text>
</g>-->
<g id="gr" transform="translate(0, 0)">
  <!--<rect x="0" y="0" height="20" fill="red" width="80" ></rect>-->
    <text x="2" y="13" font-family="Verdana" font-size="10px" fill="white" class="stan txt">Prvi sprat</text>
    <text y="13" font-family="Verdana" font-size="10px" fill="white"  class="broj txt">22m2</text>
</g>
</svg>

CSS

text{font-size:10px;}

JavaScript

//alert($('#hello').width());
$twidthStan=$('#gr .stan.txt')[0].getBBox().width+8;
$twidthBroj=$('#gr .broj.txt')[0].getBBox().width;
//$roomNameW=$twidth-$tswidth;

//console.log($('#gr text')[0].getBBox().width);

$('#gr').prepend('<svg><rect x="0" y="0" height="20" fill="black" width="'+$twidthStan+'" class="stan bg"></rect><svg>');
$('#gr .stan.bg').unwrap();

$('#gr').prepend('<svg><rect x="'+$twidthStan+'" y="0" height="20" fill="orange" width="'+($twidthBroj+5)+'" class="broj bg"></rect><svg>');
$('#gr .broj.bg').unwrap();
$('#gr .broj.txt').attr('x',$twidthStan+2);