我有一个指定特定高度和宽度的 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),而不必遍历和更新其中包含的所有对象(在本例中只是红色圆圈)?
最佳答案
要调整 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。
关于image - 将整个 SVG 图像缩放到新尺寸,而无需更新其中所有对象的尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26158256/