Largeur et hauteur automatique pour l'image SVG

Question

Je suis nouveau au SVG, donc désolé si c'est un peu une question noob. J'essaie de comprendre comment obtenir une image à afficher avec toute la largeur et la hauteur de l'image référencée. J'utilise D3.js pour construire un graphique et je veux qu'un logo apparaisse dans le coin. Le problème est que l'image href sera définie à l'aide de javascript, donc l'image référencée n'est jamais une largeur ou une hauteur fixe. Ce que je veux, c'est l'image à afficher dans sa largeur et sa hauteur, et non pas à l'échelle. Ce que j'espérais, c'est la possibilité de définir automatiquement la largeur et la hauteur de l'image en fonction de son contenu, par exemple en définissant les attributs width et height sur auto. Cependant, cela ne fait que montrer que l'image n'est pas affichée.

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'); 

Comment pourrais-je aller sur la spécification que l'image SVG width et height doivent être déterminées de façon dynamique en fonction de la taille de l'image référencée?

Answer 1

Je ne pense pas que 'auto' soit une valeur valide pour l'attribut 'longueur' d'un élément d'image svg. Jetez un oeil à la spécification here. Vous voudrez peut-être utiliser '100%'

Vous pouvez charger l'image, puis inspecter la largeur et la hauteur de chargement.

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

Il est quelques années puisque cela a été demandé, mais je tente actuellement de déterminer certaines choses sur l'utilisation de auto en tant que valeur pour moi-même largeur ou la hauteur et pensé que je partagerais ce que j'ai trouvé. Selon Amelia Bellamy-Royds' 2015 article sur SVGs et la mise à l'échelle codepen example elle fournit, si vous mettez auto en soit comme le width ou la valeur de votre height<svg>, ainsi que d'une valeur pour la viewBox, vous devriez être en mesure de voir le contenu d'échelle proportionnellement. Malheureusement, elle souligne également qu'à l'époque cela ne fonctionnait que dans les navigateurs "Blink/Firefox". Blink is a fork of part of WebKit, il est donc possible que Chrome le supporte également. Je vois un comportement dans Chrome qui semble soutenir cette possibilité, mais je reçois aussi une erreur donc YMMV.