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

Question

Я новичок в SVG, так что извините, если это немного вопрос о нобе. Я пытаюсь понять, как получить изображение для отображения с полной шириной и высотой ссылочного изображения. Я использую D3.js, чтобы построить график, и я хочу, чтобы логотип появился в углу. Проблема заключается в том, что изображение href будет установлено с использованием javascript, поэтому ссылка на изображение никогда не будет фиксированной шириной или высотой. Я хочу, чтобы изображение отображалось в его полной ширине и высоте, а не увеличено или уменьшено. На что я надеялся - это возможность автоматически устанавливать ширину и высоту изображения на основе его содержимого, например, устанавливать атрибуты и 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 должны быть динамически определяется на основе ссылочного размера изображения?

Answer 1

Я не думаю, что 'auto' является допустимым значением для 'length' attr элемента изображения svg. Взгляните на спецификацию here. Возможно, вы захотите использовать «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) 

} 

Answer 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"; 
    }); 

Answer 3

Это пару лет, так как это было предложено, но я в настоящее время пытаюсь определить некоторые вещи об использовании auto качестве значения ширины или высоты самих и подумал, что поделюсь тем, что нашел. Согласно Amelia Bellamy-Royds' 2015 article на масштабировании SVGs и codepen example она обеспечивает, если вы поставите auto в качестве либо width или стоимость вашего <svg>height, наряду со значением для viewBox, вы должны быть в состоянии видеть содержание масштабирования пропорционально. К сожалению, она также отмечает, что в то время это работало только в браузерах Blink/Firefox. Blink is a fork of part of WebKit, поэтому вполне возможно, что Chrome также поддержит это. Я вижу поведение в Chrome, которое, похоже, поддерживает эту возможность, но я также получаю ошибку, поэтому YMMV.