SVG.js Text Fitting

by Zareh Geertjes

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.2.5/svg.js"></script>
Enter New Text For SVG: <input id="mytext"></input>
<div id="frame"><div id="drawing"></div></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Lobster+Two);
html, body,  {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

#frame {border:15px solid yellow;
    width:502px;
    height:502px;
    margin:0px;
    overflow:hidden;
    padding:2px;
    background:#000;
}
 #drawing {
    padding:0;
    margin:0;
    background:#FFFFEB;
    width:100%;
    height:100%;
}

JavaScript

var draw = SVG('drawing').viewbox(-250, 0, 500, 500)
var text = draw.text('COOL')
    .font({ size: 120, leading: 1, family: 'Lobster Two', anchor: 'middle' })
    .fill('#f06')

// Function to set new text for svg

$("#mytext").keyup(function(){
    text.text($(this).val());

});


//var rect = draw.rect(500, 500).move(0, 0).fill('#f09')