SVG：用封闭的矩形或 SVG 元素缩放文本？

Question

有类似的问题like this，但没有一个是相同的。

目标是将文本缩放为其封闭的矩形或 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 缩放到 0.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>