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缩放为.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>

SVG：使用矩形或SVG元素缩放文本吗？

1 个答案: