SVG画像の幅と高さが自動的に表示されます

Question

私はSVGに新規ですので、ごめんなさい。私は参照画像の全幅と高さで画像を表示する方法を理解しようとしています。私は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を動的に参照画像サイズに基づいて決定されなければならないことを指定するに行きますか？

Answer 1

私は「自動」SVG画像要素のATTR「長さ」の有効な値ではないと思います。仕様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の使用に関するいくつかのことを自分で決定しようとしていると私が見つけたものを分かち合うと思った。スケーリングSVGs上Amelia Bellamy-Royds' 2015 article、あなたはどちらかwidthまたはviewBoxの値と一緒にあなたの<svg>のheight値は、あなたが比例スケーリングコンテンツを見ることができるはずようにautoを入れた場合、彼女は、提供codepen exampleによります。残念なことに、彼女はまた、この時点では、「Blink/Firefox」ブラウザでのみ動作していたことを指摘しています。 Blink is a fork of part of WebKitだから、今でもChromeでこれもサポートされている可能性があります。私はこの可能性をサポートするように思われるChromeの動作を見ていますが、YMMVもエラーになります。