SVG: scale text with enclosing rectangle or SVG element?

Question

There are similar questions like this, but none are identical.

The goal is to scale text as its enclosing rectangle or SVG element scales.

In the example below, the enclosing SVG element is 200x300.

The goal is for the whole element to preserve proportionality, including text.

If you scale by 0.5 to 100x150, the text should scale accordingly.

However, changing the size to 100x150 scales the SVG element correctly, but the text remains the same size and no longer retains the same proportions to the enclosing container.

Code pen: 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>

@RobertLongson could you kindly post an answer? if it works, you can be awarded credit. thanks for the reply! — Crashalot, Dec 18 '18 at 08:32
The text is a different size when I view the codepen so I don't really know what your problem is. — Robert Longson, Dec 18 '18 at 08:37

score 1 · Accepted Answer · edited Dec 18 '18 at 11:15

1

You can create the base svg and scale that entire svg with a scale value, then the text also will be scaled. Here is a demo in which I scaled the svg to .5, the entire svg with the text is scaled to half.

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>

edited Dec 18 '18 at 11:15

Crashalot

33,605
61
269
439

answered Dec 18 '18 at 06:59

Nitha

672
5
10

do you happen to know the answer to this? https://stackoverflow.com/questions/53829519/svg-how-to-center-multiple-lines-of-text-evenly-inside-of-element/53829632?noredirect=1#comment94510128_53829632 – Crashalot Dec 18 '18 at 11:15

SVG: scale text with enclosing rectangle or SVG element?

1 Answers1