svg-text-size/dist/index.js

Get a {width, height} given a text string (or array) and svg attributes

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
var ns = 'http://www.w3.org/2000/svg';
var makeSvgNode = function makeSvgNode(name, doc) {
  return doc.createElementNS(ns, name);
};

var makeTextSpanNode = function makeTextSpanNode(text, dy, doc) {
  var node = doc.createTextNode(text);
  var span = makeSvgNode('tspan', doc);
  span.setAttribute('x', 0);
  span.setAttribute('y', 0);
  span.setAttribute('dy', dy);
  span.appendChild(node);
  return span;
};

var makeTextNode = function makeTextNode(texts) {
  var attrs = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
  var doc = arguments[2];

  var node = makeSvgNode('text', doc);
  node.setAttribute('x', 0);
  node.setAttribute('y', 0);
  for (var attr in attrs) {
    node.setAttribute(attr, attrs[attr]);
  }
  texts.forEach(function (t, i) {
    return node.appendChild(makeTextSpanNode(t, i + 'em', doc));
  });
  return node;
};

// Takes a string, or array of strings, some svg attrs, and gives you back a
// {width, height} of the resulting svg box containing the strings.
var svgTextSize = function svgTextSize(texts, attrs) {
  var doc = arguments.length <= 2 || arguments[2] === undefined ? document : arguments[2];

  var textArr = texts.constructor === Array ? texts : [texts];
  var svg = makeSvgNode('svg', doc);
  var textNode = makeTextNode(textArr, attrs, doc);
  svg.appendChild(textNode);
  doc.body.appendChild(svg);

  var _textNode$getBBox = textNode.getBBox();

  var width = _textNode$getBBox.width;
  var height = _textNode$getBBox.height;

  doc.body.removeChild(svg);
  return { width: width, height: height };
};

exports.default = svgTextSize;