Как сделать отзывчивый текст в SVG, который масштабируется под контейнер - PullRequest
Новая
       17

Как сделать отзывчивый текст в SVG, который масштабируется под контейнер

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

Я видел много вещей, намекающих на эту возможность:

Эта первая ссылка лучше всего, которая показывает, как текстscale.

enter image description here

Я реализовал версию этого функционала на JavaScript, но я хочу применить его ко многим элементам, и я думаю, что SVG поможетбыть лучшим выбором.

Однако моя попытка скопировать код из этой первой ссылки не приводит к тому же результату, она не работает: 

<head>
<style>
* {
  padding: 0px;
  margin: 0px;
}
/*div*/.ad-wrapper {
  height: 0;
  padding-top: 100%;
  position: relative;
}
/*svg*/.ad {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: red;
  color: black;
}
</style>
</head>
<body>
<div class="ad-wrapper">
  <svg class="ad" xmlns="http://www.w3.org/2000/svg">
    <text font-family="'proxima-nova', sans-serif">Mountain</text>
  </svg>
</div>
</body>

Интересно, что я делаю не так и как это исправить.Я бы хотел, чтобы текст располагался по центру в адаптивном поле (четное квадратное), где отступы по всем сторонам текста пропорционально увеличиваются, без необходимости вообще использовать JavaScript.

1 Ответ

2 голосов
/ 06 июня 2019

Всегда используйте атрибут viewBox. A viewBox="0 0 100 100" даст вам квадратную коробку. Дайте тексту x и y. В этом случае вы можете использовать x="50" y="50" Для центрирования текста вы можете использовать text-anchor:middle;dominant-baseline:middle

* {
  padding: 0px;
  margin: 0px;
}
/*div*/.ad-wrapper {
  height: 0;
  padding-top: 100%;
  position: relative;
}
/*svg*/.ad {
  position: absolute;
  width: 100%;
 
  top: 0;
  left: 0;
  background: red;
  color: black;
}

text{fill:black;text-anchor:middle;dominant-baseline:middle}
<div class="ad-wrapper">
<svg class="ad" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <text x="50" y="50" font-family="'proxima-nova', sans-serif">Mountain</text>
</svg>
</div>
...