根据高度和文本创建容器宽度和字体大小

Question

我有以下变量：

容器高度： 3cm
A text： John Smith
字体类型： Times New Roman


基于这些变量，我想创建一个svg文档，其中渲染的文本适合高度，宽度适合渲染的文本。

所以在我的情况下，看起来像这样（手动完成）：

<?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>

这有可能吗？这是我第一次处理SVG。

Answer 1

我唯一能建议的是使用javascript根据渲染文本调整文档大小。在我的头顶，你可以做类似的事情：

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);

就Javascript而言，你可以把它放在你的html文件中，并在加载DOM后立即运行它。