CODEWITHSUNDEEP
xmlsvg
John Smith
John Smith

Reputation: 630

Create container width and font size based on height and text

I have the following variables:

Container height: 3cm
A text: John Smith
A font-type: Times New Roman


Based on those variables I'd like to create an svg document where the rendered text fits the height and the width fits the rendered text.

So in my case that'd look something like this (done manually): enter image description here

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="" height="3cm" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <text x="" y="" font-size="" font-family="Times New Roman" >
  John Smith
  </text>
</svg>

Is that in any way possible? This is my first time dealing with SVG.

Upvotes: 0

Views: 164

Answers (1)

RestingRobot
RestingRobot

Reputation: 2978

The only thing I can suggest is using javascript to resize the document based on the rendered text. Off the top of my head, you could do something like:

var elem = document.getElementById(//text id);
var height = elem.getBBox().height;
var width = elem.getBBox().width;

var svg_elem = document.getElementById(//svg id);
svg_elem.setAttributeNS(null, "width", width); 
svg_elem.setAttributeNS(null, "height", height);

As far as the Javascript goes, you could can place it in your html file, and run it as soon as the DOM is loaded.

Upvotes: 0

Related Questions