21

我是新手SVG，如果这是一个菜鸟问题，我很抱歉。我试图弄清楚如何让图像以引用图像的全宽和高度显示。我正在使用D3.js构建图表，并且希望在角落出现徽标。问题是图像href将使用 javascript 设置，因此被引用的图像永远不是固定的宽度或高度。我想要的是图像以全宽和全高显示，而不是放大或缩小。我希望的是能够根据图像的内容自动设置图像的宽度和高度，例如将widthandheight属性设置为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必须根据引用的图像大小动态确定？

4

3 回答 3

26

我不认为 'auto' 是 svg 图像元素的 'length' attr 的有效值。看看这里的规范。您可能想使用“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)

}
于 2013-04-14T15:39:48.430 回答
3 
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";
    });
于 2015-06-07T04:53:54.280 回答
3

自从有人问过这个问题以来已经有几年了，但我目前正在尝试确定一些关于auto我自己用作宽度或高度值的事情，并认为我会分享我的发现。根据Amelia Bellamy-Royds 的 2015 年关于缩放 SVG 的文章和她提供的codepen 示例，如果您auto输入 的width或 的height值<svg>以及 的 值viewBox，您应该能够看到按比例缩放的内容。不幸的是，她还指出，当时这只适用于“Blink/Firefox”浏览器。Blink 是 WebKit 的一个分支, 所以现在 Chrome 也可能会支持这个。我在 Chrome 中看到了似乎支持这种可能性的行为，但我也收到了一个错误，所以 YMMV。

于 2017-11-16T22:42:10.973 回答