web-dev-qa-db-ja.com

SVG画像の自動幅と高さ

私はSVGを初めて使用するので、これが少しnoobの質問であれば申し訳ありません。参照画像の全幅と高さで画像を表示する方法を理解しようとしています。使っています 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は、参照される画像サイズに基づいて動的に決定する必要があることをどのように指定しますか？

imagesvgd3.js
17
BruceHill

'auto'はsvg画像要素の 'length'属性の有効な値ではないと思います。仕様をご覧ください here 。あなたは「100％」を使いたいかもしれません

あなたはcould画像をロードしてから、ロード時の幅と高さを検査します。

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

これが尋ねられてから数年ですが、私は現在、幅または高さの値としてのautoの使用についていくつかのことを決定しようとしています。そして、私が見つけたものを共有したいと思いました。 Amelia Bellamy-Roydsの2015年の記事 によると、SVGのスケーリングと codepen example は、autoをwidthまたはheightの値<svg>、viewBoxの値とともに、コンテンツのスケーリングが比例して表示されるはずです。残念ながら、彼女はまた、現時点ではこれは「Blink/Firefox」ブラウザでしか機能しなかったとも指摘しています。 BlinkはWebKitの一部のフォークです 、つまり、Chromeがこれをサポートするようになる可能性があります。Chromeこれはこの可能性をサポートしているようですが、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