将整个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.