Создание и масштабирование элемента изображения в SVG из входного типа image base64 - PullRequest
Новая
       53

Создание и масштабирование элемента изображения в SVG из входного типа image base64

3 голосов
/ 20 января 2020

Итак, у меня есть слушатель 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);
    })
...