Question

很难知道文本需要什么尺寸，尤其是旋转时。结果，很容易使viewBox变得太小，然后文本在viewBox外部消失。但是，如果viewBox太大，则还有大量额外的空白也会被缩放。有没有办法缩放viewBox或svg内容以适合？

我知道关于将ViewBox缩放为svg的宽度和高度的preserveAspectRatio，但是我在问有关缩放以适合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

1 个答案: