Javascript 检索SVG中缩放图像的尺寸

我将不同大小的图像加载到内容区域中，当它们按比例调整大小时，图像的任意给定两侧和内容区域的边界之间通常会有间隙

我将该图像顶部的矩形分层，调整不透明度，以改变下面背景图像的可见程度。我希望此过滤器与图像大小匹配

以下是元素的定义方式：

 <td id="svgContentCell">
           <svg id="svg" width="1000" height="750" version="1.1" onload="Init()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"
            onmousedown="onMouseDown(evt)" onmousemove="onMouseMove(evt)" onmouseup="onMouseUp(evt)" >

            <image id="background" x="0" y="0" width="100%" height="100%" xlink:href=""></image>
            <rect id="filter" x="0" y="0" width="100%" height="100%" fill="rgb(255, 255, 255)" fill-opacity="0"></rect>
        </svg>
    </td>

有没有人知道一种方法可以获得缩放后的

背景图像的实际像素宽度和高度，这样我就可以适当地调整
过滤器
元素的大小？
您可以试试这个方法

var height = document.getElementById('myimage').offsetHeight;
var width = document.getElementById('myimage').offsetWidth;

你应该做你想做的事

var rect = bg.getBoundingClientRect();

然后，您可以从该对象中选择宽度和高度属性。
罗伯特·朗森（Robert Longson）似乎是一个可靠的来源，他指出无法检索该属性，因此我编写了自己的函数来计算它

function calculateScaledImage() {
    // Get the container dimensions
    var bg = document.getElementById("background");
    var rect = bg.getBoundingClientRect();
    var cHeight = rect.height; // result: 750
    var cWidth = rect.width; // result: 1000

    // Get the unscaled dimensions
    var address = bg.getAttribute('xlink:href');
    // Create new image with URL to get unscaled dimension (not displayed)
    var original = new Image();
    original.src = address;
    var oWidth = original.width;
    var oHeight = original.height;

    // New dimensions and ratio for scaling
    var nWidth;
    var nHeight;
    var ratio;

    var isWide = false;

    // Is the empty space going to be on sides or top
    if (oWidth > oHeight) {
        isWide = true;

            // I found that if the height exceeded the container it scaled it  differently
        if (oHeight > cHeight)
        {
            isWide = false;
        }
    }

    var filter = document.getElementById('filter');
    if (isWide) {
        ratio = cWidth / oWidth;
        nWidth = oWidth * ratio;
        nHeight = oHeight * ratio;

        var adjustment = (cHeight - nHeight) / 2;

        filter.setAttribute("y", adjustment);
        filter.setAttribute("x", 0);
        filter.setAttribute("width", nWidth);
        filter.setAttribute("height", nHeight);
    }
    else {
        ratio = cHeight / oHeight;
        nHeight = oHeight * ratio;
        nWidth = oWidth * ratio;

        var adjustment = (cWidth - nWidth) / 2;

        filter.setAttribute("x", adjustment);
        filter.setAttribute("y", 0);
        filter.setAttribute("width", nWidth);
        filter.setAttribute("height", nHeight);
    }
}

如果阅读问题，用户希望了解缩放背景图像的实际像素宽度和高度。与偏移量无关我刚刚测试了它并返回SVG容器的尺寸，而不是其中包含的缩放图像的值<代码>var bg=document.getElementById（“背景”）
var rect=bg.getBoundingClientRect（）
var height=rect.height；//=750
var width=rect.width；//=1000
但您的示例中的图像是容器的大小，它的高度/宽度为100%，这意味着大小等于容器的大小。我在问题中添加了一个图像以进一步说明问题。你是说容器（绿色边框）和白色背景之间的空白实际上是图像的一部分，但是是透明的？那么SVG图像是内容吗？如果是这样，外部元素是什么样子的？它是否具有viewBox或PreserveSpectratio属性？是什么给了图像一个白色的背景？你想要的是不可能的，除非你自己计算。您知道真实的图像尺寸（必须硬编码），因此，如果图像的aspectRatio与容器的aspectRatio不同，则左/右或上/下都会有空白。
function calculateScaledImage() {
    // Get the container dimensions
    var bg = document.getElementById("background");
    var rect = bg.getBoundingClientRect();
    var cHeight = rect.height; // result: 750
    var cWidth = rect.width; // result: 1000

    // Get the unscaled dimensions
    var address = bg.getAttribute('xlink:href');
    // Create new image with URL to get unscaled dimension (not displayed)
    var original = new Image();
    original.src = address;
    var oWidth = original.width;
    var oHeight = original.height;

    // New dimensions and ratio for scaling
    var nWidth;
    var nHeight;
    var ratio;

    var isWide = false;

    // Is the empty space going to be on sides or top
    if (oWidth > oHeight) {
        isWide = true;

            // I found that if the height exceeded the container it scaled it  differently
        if (oHeight > cHeight)
        {
            isWide = false;
        }
    }

    var filter = document.getElementById('filter');
    if (isWide) {
        ratio = cWidth / oWidth;
        nWidth = oWidth * ratio;
        nHeight = oHeight * ratio;

        var adjustment = (cHeight - nHeight) / 2;

        filter.setAttribute("y", adjustment);
        filter.setAttribute("x", 0);
        filter.setAttribute("width", nWidth);
        filter.setAttribute("height", nHeight);
    }
    else {
        ratio = cHeight / oHeight;
        nHeight = oHeight * ratio;
        nWidth = oWidth * ratio;

        var adjustment = (cWidth - nWidth) / 2;

        filter.setAttribute("x", adjustment);
        filter.setAttribute("y", 0);
        filter.setAttribute("width", nWidth);
        filter.setAttribute("height", nHeight);
    }
}