Авто ширина и высота для изображения SVG

Я новичок в SVG, поэтому извините, если это немного вопрос о noob. Я пытаюсь понять, как получить изображение для отображения с полной шириной и высотой ссылочного изображения. Я использую D3.js для построения графика, и я хочу, чтобы логотип появился в углу. Проблема в том, что изображение href будет установлено с помощью javascript, поэтому ссылка на изображение никогда не будет фиксированной шириной или высотой. То, что я хочу, - это изображение для отображения в нем полной ширины и высоты, а не масштабирования или уменьшения. На что я надеялся - это возможность автоматически устанавливать ширину и высоту изображения на основе его содержимого, например, устанавливать атрибуты width и height на auto. Однако это приводит к тому, что изображение не отображается.

d3.select("body")
  .append("svg")
  .attr('id','mySVG')
  .attr({
      "width": "100%",
      "height": "100%"
  })
  .attr("viewBox", "0 0 " + width + " " + height )
  .attr("preserveAspectRatio", "none");

d3.select('#mySVG')
  .append('image')
  .attr('image-rendering','optimizeQuality')
  .attr('height','auto')     <--- This does not work
  .attr('width','auto')      <--- This does not work
  .attr('xlink:href', logoUrl)
  .attr('x','0')
  .attr('y','0');

Как я могу указать, что изображение SVG width и height должно быть динамически определено на основе указанного размера изображения?

Ответ 1

Я не думаю, что "auto" является допустимым значением для "length" attr элемента изображения svg. Взгляните на spec здесь. Вы можете использовать '100%'

Вы можете загрузить изображение, а затем проверить ширину и высоту загрузки.

JSFiddle: http://jsfiddle.net/WQBPC/4/

var logoUrl = 'http://placehold.it/100x50&text=Logo';

//SVG Setup stuff
var svg =  d3.select("body").append("svg")
  .attr('id','mySVG')
  .attr({
      "width": '100%',
      "height": '100%'
  })

var svg_img=  svg.append('image')
  .attr('image-rendering','optimizeQuality')
  .attr('x','0')
  .attr('y','0');

//Load image and get size.
var img = new Image();
img.src = logoUrl;
img.onload = function() {
 var width = this.width;
 var height = this.height;

 svg_img .attr('height', height)
  .attr('width',width)
  .attr('xlink:href', logoUrl)

}

Ответ 2

d3.select("svg")
  .append("image")
    .attr("id", "myImage")
    .attr("xlink:href", "myImage.png")
    .on("load", function(d) { 
        var myImage = new Image();
        myImage.onload = function() {
            d3.select("#myImage")
                .attr("width", this.width)
                .attr("height", this.height);
        }
        myImage.src = "myImage.png";
    });

Ответ 3

Прошло пару лет с тех пор, как было спрошено, но сейчас я пытаюсь определить некоторые вещи об использовании auto как значения для ширины или высоты и подумал, что я поделюсь тем, что нашел. Согласно статья Амелии Беллами-Ройдс в 2015 году о масштабировании SVG и codepen, который она предоставляет, если вы поместите auto в качестве значения width или height вашего <svg>, а также значение для viewBox, вы должны уметь видеть масштабирование содержимого пропорционально. К сожалению, она также отмечает, что в то время это работало только в браузерах Blink/Firefox. Blink - это вилка части WebKit, поэтому возможно, что Chrome также будет поддерживать это. Я вижу поведение в Chrome, которое, похоже, поддерживает эту возможность, но я также получаю ошибку, поэтому YMMV.