web-dev-qa-db-fra.com

Largeur et hauteur automatiques pour l'image SVG

Je suis nouveau sur 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 que l'image s'affiche dans toute sa largeur et sa hauteur, et non à l'échelle vers le haut ou vers le bas. Ce que j'espérais, c'était 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 l'image non.

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 spécifier que l'image SVG width et height doit être déterminée dynamiquement en fonction de la taille de l'image référencée?

imagesvgd3.js
17
BruceHill

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

Vous pourriez 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)

}
23
WolfgangCodes

Cela fait quelques années que cela a été demandé, mais j'essaie actuellement de déterminer moi-même certaines choses sur l'utilisation de auto comme valeur de largeur ou de hauteur et j'ai pensé partager ce que j'ai trouvé. Selon article d'Amelia Bellamy-Royds de 2015 sur la mise à l'échelle des SVG et le exemple de codepen qu'elle fournit, si vous mettez auto en tant que width ou la valeur height de votre <svg>, ainsi qu'une valeur pour viewBox, vous devriez pouvoir voir le contenu évoluer proportionnellement. Malheureusement, elle souligne également qu'à l'époque cela ne fonctionnait que dans les navigateurs "Blink/Firefox". Blink est un fork d'une partie de WebKit , il est donc possible que maintenant Chrome le supporte également. Je constate un comportement dans Chrome qui semble supporter cette possibilité, mais je reçois également une erreur donc YMMV.

3
flyingace
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
e18r