可以给我一个SVG'；背景图像是否缩小，但不向上？

我试图将任意图像作为具有固定大小的SVG的背景。所需的行为是将大于SVG固定大小的图像均匀缩放以适应框内（即“满足”而不是“剪辑”），并将较小的图像以其原始大小显示。（它也应该居中，但我已经算出了这一部分。）

让大图像缩小是很容易的，但我还没有弄清楚如何让小图像不放大。有什么想法吗？这是一个与SVG而不是CSS类似的问题。这肯定是相关的，但因为我事先不知道图像的像素大小，所以解决方案对我没有帮助

以下是当前SVG结构的简化版本，背景图像为：

<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" xlinkns="http://www.w3.org/1999/xlink" width="640" height="480" x="640" y="480" overflow="visible">
  <svg id="canvasBackground" width="640" height="480" x="0" y="0" overflow="none" style="pointer-events:none">
    <rect width="100%" height="100%" x="0" y="0" stroke="#000" fill="#FFF" style="pointer-events:none"/>
    <image id="background_image" width="100%" height="100%" preserveAspectRatio="xMidYMid" style="pointer-events:none" href="http://placekitten.com/500/400/"/>
  </svg>
</svg>

无法通过SVG DOM（AFAIK）获得图像的自然大小。因此，首先需要使用HTMLDOM加载图像，以确定大小

var  htmlImg = document.createElement("img");
// Add an onload listener so we know when it is loaded
htmlImg.addEventListener('load', function() {
    // Get the image width and height (modern browsers only unfortunately)
    var  w = htmlImg.naturalWidth;
    var  h = htmlImg.naturalHeight;
    // Now we can add an <image> element to the <svg>
    // ...
});
// Set the img src attribute to trigger the load
htmlImg.src = url;

var htmlImg=document.createElement（“img”）；
//添加一个onload侦听器，以便我们知道何时加载它
htmlImg.addEventListener（'load'，function（）{
//获取图像的宽度和高度（不幸的是，仅限现代浏览器）
var w=htmlImg.naturalWidth；
var h=htmlImg.naturalHeight；
//现在我们可以将一个元素添加到
// ...
});
//设置img src属性以触发加载
htmlImg.src=url；

---

此代码使用HTMLImageElement的

naturalWidth

和

naturalHeight

属性。较旧的浏览器（如IE7/8）不支持这些功能。如果您需要支持较旧的浏览器，则需要做更多的工作。搜索帮助。

普通SVG无法实现这种效果。您需要嵌入一个小脚本来执行此操作。可以接受吗？它可以在浏览器中工作，但不一定在其他SVG渲染器中工作。（我们正在使用SketchyGem for Rails的一个自定义分支来嵌入svg编辑脚本，因此我们可能需要进行一些修改，以便将自定义脚本放在正确的位置。）谢谢！这个网站在HTML5特性方面非常积极，所以我们不太可能特意支持旧的IE版本。我会把这个放进去看看进展如何。