Auto szerokość i wysokość dla obrazu SVG

Question

Jestem nowy w SVG, więc przepraszam, jeśli jest to trochę pytanie noob. Próbuję dowiedzieć się, jak uzyskać obraz do wyświetlenia z pełną szerokością i wysokością przywoływanego obrazu. Używam D3.js do tworzenia wykresów i chcę, aby logo pojawiło się w rogu. Problem polega na tym, że obraz href zostanie ustawiony za pomocą javascript, więc odwoływany obraz nigdy nie jest stałą szerokością ani wysokością. Potrzebuję obrazu, który będzie wyświetlany na całej jego szerokości i wysokości, bez przeskalowania w górę lub w dół. Miałem nadzieję na automatyczne ustawienie szerokości i wysokości obrazu w oparciu o jego zawartość, na przykład ustawienie atrybutów width i height na auto. To jednak powoduje, że obraz nie jest wyświetlany.

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

Jak bym go o określenie, że obraz SVG width i height musi być dynamicznie określana na podstawie wskazanej wielkości obrazu?

Answer 1

Nie uważam, że "auto" jest poprawną wartością "długości" atrybutu elementu svg. Spójrz na specyfikację here. Możesz użyć "100%", aby załadować obraz, a następnie sprawdzić jego wysokość i wysokość.

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

To kilka lat, ponieważ ten został poproszony, ale jestem obecnie próbuje ustalić pewne rzeczy na temat korzystania z auto jako wartość dla szerokości lub wysokości siebie i Myślałem, że podzielę się tym, co znalazłem. Według Amelia Bellamy-Royds' 2015 article na skalowanie pomostów żylnych i codepen example ona daje, jeśli umieścić auto jako albo width lub wartość height Twojego <svg> wraz z wartością dla viewBox, powinieneś być w stanie zobaczyć zawartość skalowania proporcjonalnie. Niestety, zwraca również uwagę, że w tym czasie działało to tylko w przeglądarkach "Blink/Firefox". Blink is a fork of part of WebKit, więc możliwe, że do tej pory Chrome również to będzie obsługiwał. Widzę zachowanie w Chrome, które wydaje się wspierać tę możliwość, ale dostaję również błąd, więc YMMV.