SVG: масштабировать текст с помощью прямоугольника или элемента SVG?

Question

Есть похожие вопросы , подобные этим , но ни один из них не идентичен.

Цель состоит в том, чтобы масштабировать текст в виде его прямоугольника или элемента SVG.

ВВ приведенном ниже примере SVG-элемент имеет размер 200x300.

Целью является сохранение пропорциональности всего элемента, включая текст.

Если вы масштабируете от 0,5 до 100x150, текст должен масштабироваться соответствующим образом.

Однако изменение размера на 100x150 правильно масштабирует элемент SVG, но текст остается того же размера и больше не сохраняет те же пропорции, что и вмещающий контейнер.

Кодовое перо: https://codepen.io/anon/pen/BvLZKv?page=1&

<svg width="200" height="300">
  <g>
    <rect x="0" y="0" width="100%" height="100%" fill="red"></rect>
    <text x="50%" y="50%" font-family="Verdana" font-size="20" fill="blue" dominant-baseline="middle" text-anchor="middle">Hello</text>
  </g>
</svg>

Answer 1

Вы можете создать базовый svg и масштабировать весь svg с помощью значения масштаба, тогда текст также будет масштабироваться.Вот демонстрация, в которой я увеличил svg до .5, весь svg с текстом уменьшен до половины.

svg {
   transform: scale(.5);
  transform-origin: 0% 0%;
}

<svg width="200" height="300">
<g>
<rect x="0" y="0" width="100%" height="100%" fill="red"></rect>
<text x="50%" y="50%" font-family="Verdana" font-size="82" fill="blue" dominant-baseline="middle" text-anchor="middle">Hello</text>
</g>
</svg>