如何将svg图形组缩放到所需的大小（而不是按系数）？

我有svg图形组（我指的是路径、纠结等）。我想将团队规模扩大到一定的规模，例如70,70。我知道svg提供了缩放变换，但缩放变换需要缩放因子，我不知道，因为组可以有许多形状，并且不容易确定整个组的边界大小
我使用svg elemenent的viewBox参数并保留AspectRatio参数，但未能获得所需的结果（将组缩放到70,70）。

---

也许可以用maxtrix变换或其他方式缩放组

您可以使用

getBBox（）

函数检索图形的当前大小，然后使用宽度和高度计算应应用于图形的比例因子，以使其适合所需大小

在下面的示例中，组g1中的图形被缩放以适合宽度和高度设置为70的矩形

<?xml version="1.0" encoding="UTF-8" ?>
<svg version="1.2" viewBox="0 0 480 240" width="480" height="240" xmlns="http://www.w3.org/2000/svg" >
 <g id="g1">
    <rect x="20" y="20" width="100" height="100" fill="red" />
    <rect x="40" y="60" width="100" height="100" fill="blue" />
 </g>
 <script type="application/ecmascript"> 

    var width=70, height=70;
    var node = document.getElementById("g1");
    var bb = node.getBBox();
    var matrix = "matrix("+width / bb.width+", 0, 0, "+height / bb.height+", 0,0)";
    node.setAttribute("transform", matrix);

 </script>
</svg>

变量宽度=70，高度=70；
var节点=document.getElementById（“g1”）；
var bb=node.getBBox（）；
var matrix=“矩阵（“+width/bb.width+”，0,0，“+height/bb.height+”，0,0）”；
setAttribute（“变换”，矩阵）；

如果已经应用了path\rect转换，那么将SVG元素放入矩形绑定中可能会遇到一些问题

下面的代码演示了如何适应分组、倾斜、缩放并转换为边界的转换后的react输入。您必须保留现有转换并应用新转换

代码正在做下一件事：

• 计算屏幕坐标中的比例和位置偏移（在这种情况下计算所有变换时，在屏幕坐标中）
• 创建新矩阵，首先应用变换偏移（移动到目标的中心）
• 以元素的中心作为变换的原点应用新的缩放
• 虽然缩放应该在屏幕坐标中完成，但我们应该将当前元素转换（包括所有父级转换）转换为屏幕坐标，转换所有具有给定比例的元素，并转换回元素坐标

确切的路线是：

var toScreenMatrix = inputElement.getScreenCTM();
// Scale element by a matrix in screen coordinates and convert it back to the element coordinates:
currentMatrix = currentMatrix.multiply(toScreenMatrix.inverse().multiply(scaleAndTransform).multiply(toScreenMatrix));
    

此代码是所有svg元素的通用代码，因此任何形状都可以适合给定的矩形：

函数fit元素（从、到、更改位置）{
var inputElement=document.getElementById（来自）；
var destinationElement=document.getElementById（to）；
//获取图元坐标中的图形中心：
var inputScreenBBox=inputElement.getBoundingClientRect（）；
var destinationscreenbox=destinationElement.getBoundingClientRect（）；
var scaleX=destinationscreenbox.width/InputScreenbox.width；
var scaleY=目的Screenbox.height/InputScreenbox.height；
var inputCenter=getCenter（inputScreenBBox）；
var offsetX=0；
var offsetY=0；
如果（改变位置）{
var destCenter=getCenter（destinationscreenbox）；
offsetX=destCenter.x—inputCenter.x；
offsetY=destCenter.y—inputCenter.y；
}
//创建比例矩阵：
var scaleMatrix=getScaleMatrix（scaleX、scaleY、inputElement）；
//获取元素自变换矩阵：
var currentMatrix=getElementMatrix（inputElement）；
scaleAndTransform=inputElement.ownerSVGElement.createSVGMatrix（）
//乘法被用来代替比例法，但由于某些原因，矩阵比例给出了比例比例。。。
//从变换中生成适当的矩阵。
.translate（offsetX，offsetY）
//屏幕中心周围屏幕坐标的比例：
.translate（inputCenter.x，inputCenter.y）
.multiply（scaleMatrix）
.translate（-inputCenter.x，-inputCenter.y）
var-toScreenMatrix=inputElement.getScreenCTM（）；
//按屏幕坐标中的矩阵缩放元素，并将其转换回元素坐标：
currentMatrix=currentMatrix.multiply（toScreenMatrix.inverse（）.multiply（scaleAndTransform）.multiply（toScreenMatrix））；
//应用新创建的变换：
var newTransform=inputElement.ownerSVGElement.createSVGTransform（）；
新变换集矩阵（currentMatrix）；
inputElement.transform.baseVal.initialize（newTransform）；
}
函数getElementMatrix（元素）{
//获取合并元素矩阵：
无功电流矩阵=
（element.transform.baseVal.consolidate（）||
element.ownerSVGElement.createSVGTransform（））.matrix；
返回电流矩阵；
}
函数getScaleMatrix（scaleX、scaleY、el）{
//返回DOM矩阵
var svgTransform=el.ownerSVGElement.createSVGTransform（）；
//使用Transform type是因为chrome中存在将缩放应用于DOM矩阵的错误：
svgTransform.setScale（scaleX，scaleY）；
var scaleMatrix=svgTransform.matrix；
返回标度矩阵
}
函数getCenter（rect）{
返回新的DOMPoint（（rect.x+rect.width/2），（rect.y+rect.height/2））；
}
fitElement（'源'，'目的'，真）

对于那些想使用此解决方案的人，这里是您的解决方案的一部分：。。。使用
transform
属性是唯一的解决方案吗？没有办法告诉
继承父对象的宽度和高度
？非常有效，谢谢！这应该是可以接受的答案。@Ethan此代码有效，但元素和元素父元素的可能转换不计算在内。