我是SVG的新手,对不起,如果这是一个noob的问题.我试图找出如何让一个图像显示与参考图像的全部宽度和高度.我正在使用D3.js来构建一个图形,我想要一个标志出现在角落里.问题是,使用
javascript设置图像href,因此被引用的图像从不是固定的宽度或高度.我想要的是在全宽和高度上显示的图像,而不是放大或缩小.我所希望的是能够根据内容自动设置图像的宽度和高度,例如将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图像的宽度和高度必须根据引用的图像大小动态确定？
解决方法
我不认为’auto’是svg图像元素的’length’attr的有效值.看看规格
here.你可能想使用’100％’
您可以加载图像,然后检查宽度和高度onload.
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'); //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) }
