Question

我正在尝试将任意图像作为具有固定大小的SVG的背景。期望的行为是对于比SVG的固定尺寸更大的图像，要均匀地缩放以适合框内（即“相遇”而不是“剪辑”），并且对于图像，是较小的以原始大小显示。（它也应该集中在一起，但我已经把它弄清楚了。）

很容易让大图像缩小，但我还没弄清楚如何将小图像变为而不是按比例放大。有任何想法吗？这与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

通过SVG DOM无法获得图像的自然大小（AFAIK）。因此，您需要首先使用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寻求帮助。

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

1 个答案: