为什么图像在 SVG 中不能正确缩放？答案

【问题标题】：Why image doesn't scale properly in SVG?为什么图像在 SVG 中不能正确缩放？
【发布时间】：2019-01-22 14:45:58
【问题描述】：

我从用户那里获取 input(x,y, height, and width)，通过 javascript 在 SVG 中创建动态 img。

它工作正常，但高度和宽度不会根据值缩放（它充当图像的填充）。高度和宽度不会增加或减少。

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

Grp = document.createElementNS('http://www.w3.org/2000/svg', 'g')
Grp.setAttributeNS(null, "id", "newGrp");
svg.appendChild(Grp);

Img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
Img.setAttributeNS(null, "id", "newImg");
Img.setAttributeNS(null, "x", x);
Img.setAttributeNS(null, "y", y);
Img.setAttributeNS(null, "height", height);
Img.setAttributeNS(null, "width", width);
Img.setAttributeNS(null, "style", "height:" + height + "px;width:" + width+"px;");
//Img .setAttributeNS(null, "style", "background-size:" + height + " " + width + ";");
Img .setAttributeNS('http://www.w3.org/1999/xlink', "href", PathofImage);
Grp.appendChild(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>

我也尝试过背景大小，但效果不佳。

我怎样才能做到这一点？

【问题讨论】：

标签： javascript svg svg-edit

【解决方案1】：

发生这种情况是因为 svg 元素的宽度和高度与 viewbox 不匹配。在您的情况下，viewBox="0 0 700 700" 这意味着您的 svg 画布从 (0,0) 开始，宽度为 700 个用户单位，高度为 700 个用户单位。 SVG 的大小为width="500" height="100"。要匹配 wiewBox，您需要 width="500" height="500" 或 width="100" height="100"

请看看与视图框大小相同的矩形会发生什么：

svg{border:1px solid;}

<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"> 

<rect width="700" height="700" />

</svg>

也许这就是你需要的：

svg{border:1px solid;}

<svg xmlns:xlink="http://www.w3.org/1999/xlink" 
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" 
 overflow="visible" viewBox="0 0 700 700"> 
<g id="newGrp">
  <rect x="108.3" y="375.3" height="48.5" width="144.3" fill="none" stroke="black" />
 <image id="newImg" x="108.3" y="375.3" height="48.5" width="144.3" 
 style="background-size:38.5 134.3;" 
 xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/%20BrianArnesen.svg"></image>  
<g>
<svg>

或者，您可能希望将 viewBox 更改为 viewBox="0 0 500 100"

【讨论】：

【解决方案2】：

你可以试试用 % 代替 px 吗？

另外请通过开发者工具检查图片的高度和宽度是否更新。

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

【讨论】：

【解决方案3】：

例如，您必须将preserveAspectRatio 设置为您的image

preserveAspectRatio="xMidYMid slice"

【讨论】：