Javascript 为什么图像没有'；在SVG中不能正确缩放？

我从用户那里获取输入（x、y、高度和宽度），通过javascript在SVG中创建动态img

它可以很好地工作，但高度和宽度不能根据值进行缩放（它在图像中起到填充作用）。高度和宽度不会增加或减少

以下是我的代码（仅与问题相关）：

下面是SVG的外观

<svg xmlns:xlink="http://www.w3.org/1999/xlink" 
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" 
width="500" height="100" overflow="visible" x="500" 
y="500" viewBox="0 0 700 700"> 
<g id="newGrp">
 <image id="newImg" x="108.3" y="375.3" height="48.5" width="144.3" 
 style="background-size:38.5 134.3;" 
 xlink:href="pathofImage"></image>  
<g>
<svg>

我也试过背景尺寸，但效果不太好

---

我怎样才能做到这一点呢？

你能试着用%而不是px吗

另外，请检查高度和宽度是否通过检查显影工具中的图像得到更新

---

另外，尝试从开发人员工具更新属性值，并观察哪一个工作正常。

发生这种情况是因为svg元素的宽度和高度与

视图框不匹配。在您的示例中，viewBox=“0 0 700 700”

意味着您的svg画布从（0,0）开始，宽度为700个用户单位，高度为700个用户单位。SVG的大小是

width=“500”height=“100”

。要匹配wiewBox，您需要

width=“500”height=“500”

或

width=“100”height=“100”

请查看与viewbox大小相同的矩形会发生什么情况：

svg{border:1px solid；}

例如，您必须将图像设置为

preserveAspectRatio="xMidYMid slice"

preserveAspectRatio="xMidYMid slice"