image - 将整个 SVG 图像缩放到新尺寸，而无需更新其中所有对象的尺寸

Question

我有一个指定特定高度和宽度的 SVG 图像。 SVG 图像中的所有对象都是使用此宽度和高度创建的。像这样的事情:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="600">
  <g>
    <circle cx="300" cy="300" r="295" fill="red" stroke="black" stroke-width="10"/>
  </g>
</svg>

这会形成一个带有黑色边框的 600 像素红色圆圈:

如何缩放此 SVG 图像(例如 200x200)，而不必遍历和更新其中包含的所有对象(在本例中只是红色圆圈)？

Answer 1

要调整 SVG 图像的大小，您需要引入一个包含原始大小像素的 viewBox 属性。然后您可以将宽度和高度更改为您想要的任何值。

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="0 0 600 600">
  <g>
    <circle cx="300" cy="300" r="295" fill="red" stroke="black" stroke-width="10"/>
  </g>
</svg>

这样，绘制图像的坐标系仍然是原始的 600x600，但图像显示缩放为 200x200。