我可以缩小 SVG 的背景图像，但不能放大吗？

Question

我正在尝试将任意图像放置为具有固定大小的 SVG 的背景。期望的行为是对于比 SVG 的固定大小更大 的图像进行均匀缩放以适合框内（即“meet”而不是“clip”），并且对于更小 以原始大小显示。 （它也应该居中，但我已经弄清楚了。）

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

这是当前 SVG 结构的简化版本，以 Placekitten 作为背景图片：

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

Answer 1

没有办法（AFAIK）通过 SVG DOM 获得图像的自然大小。所以需要先使用 HTML DOM 来加载图片，才能确定大小。

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;

Here is a working demo.

此代码使用 HTMLImageElement 的 naturalWidth 和 naturalHeight 属性。较旧的浏览器（例如 IE7/8）不支持这些。如果您需要支持较旧的浏览器，则需要做更多的工作。搜索 SO 寻求帮助。