Масштабировать SVG с текстом, чтобы поместиться внутри viewBox - PullRequest
Новая
       22

Масштабировать SVG с текстом, чтобы поместиться внутри viewBox

0 голосов
/ 14 июня 2019

Трудно понять, какие размеры требует текст, особенно если он повернут.В результате легко сделать viewBox слишком маленьким, и тогда текст исчезнет за пределами viewBox.Однако, если viewBox слишком велик, то существует масса лишних пробелов, которые также масштабируются.Есть ли способ масштабировать viewBox или содержимое SVG, чтобы соответствовать?

Я знаю о preserveAspectRatio, чтобы масштабировать viewBox до ширины и высоты svg, но я спрашиваю о масштабировании, чтобы соответствовать viewBox.

В целом, как мне подойти к определению размеров viewBox для текста?

1 Ответ

1 голос
/ 14 июня 2019

Простой способ JavaScript состоит в том, чтобы получить 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".

...