用文本缩放 svg 以适应 viewBox

Question

很难知道文本需要多大尺寸，尤其是旋转后。结果，很容易将 viewBox 设置得太小，然后文本消失在 viewBox 之外。但是，如果 viewBox 太大，则会有大量额外的空白区域也会被缩放。有没有办法缩放 viewBox 或 svg 内容以适应？

我知道 preserveAspectRatio 可以将 viewBox 缩放到 svg 的宽度和高度，但我想问的是缩放以适合 viewBox。

更一般地说，我如何确定文本的 viewBox 尺寸？

Answer 1

简单的 javascript 方法是 get the BBox 您的容器并将其应用为它的 viewBox 属性。

onclick = e => {
  const svg = document.querySelector('svg');
  const bbox = svg.getBBox();
  svg.setAttribute('viewBox', `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`);
  console.log(bbox);

};

svg {
  border: 1px solid;
}
text {
  font: 16px "Times Roman";
}

<svg width="300" height="150">
  <text x="0" y="50" >Click to adjust</text>
</svg>

您显然也可以从浏览器中手动调用它，然后将其手动复制到您的标记中：

svg {
  border: 1px solid;
}
text {
  font: 16px "Times Roman";
}

<svg width="300" height="150" viewBox="0 36 93.34375 18">
  <text x="0" y="50">Click to adjust</text>
</svg>

但是，据我所知，没有任何东西可以让您设置一个可以识别其内容的 viewBox。也就是说，你不能做类似 viewBox="contain".

的事情

用文本缩放 svg 以适应 viewBox

Scale svg with text to fit inside viewBox

svg

scale