Javascript 从输入类型image base64在svg中创建和缩放图像元素

因此，我在输入类型图像上有一个onChange监听器，它触发将图像元素附加到svg上。当我尝试使用viewbox或其他方法缩放图像时，会出现问题。图像元素附加到svg，但它仅覆盖svg的一部分，相当于图像分辨率。我希望在svg中相应地缩放图像

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            var svg = document.getElementById('svg');
            $("svg").empty();

            var image = document.createElementNS(svgNS, 'image');
            image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', e.target.result);
            image.setAttributeNS(svgNS, 'class', 'map-image');
            image.setAttributeNS(svgNS, 'width', '1000px');
            image.setAttributeNS(svgNS, 'height', '500px');
            image.setAttributeNS(svgNS, 'x', '0');
            image.setAttributeNS(svgNS, 'y', '0');
            svg.appendChild(image);
        }

        reader.readAsDataURL(input.files[0]);
    }
}
  $('#input-map').on('change', function () {
        //get the file name
        var fileName = $(this).val();
        readURL(this)
        //replace the "Choose a file" label
        $(this).next('.custom-file-label').html(fileName);
    })

---

您是否尝试过transform:scale（）；？为什么

viewBox

会缩放任何东西？viewbox属性仅说明无限SVG文档的哪一部分应算作“可渲染内容”。但更相关的问题是：为什么要使用SVG元素？这里有什么

不能做的事情吗？