私はに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');
width
SVG 画像を指定するにはどうすれheight
ばよいですか?参照される画像サイズに基づいて動的に決定する必要がありますか?