D3利用viewBox属性等比例缩放SVG图像

//把svg标签下的所有元素所占的1000*1000大小在300*300中显示,代码如下:

	var svg = d3.select("body").append("svg")
	    .attr("width", 300)
	    .attr("height", 300)
	    .attr("viewBox", "0 0 1000 1000")
	    .append("g")
	    .attr("transform", "translate(0,0)");
	   
//添加按钮以动态控制缩放大小

        $("svg").attr("height","500");
        $("svg").attr("width","500");
        
注:
    图像整体缩小时并不会因为svg宽高与viewBox定义区域宽高比例不同而拉长或者压扁图像,会始终保持viewBox定义区域比例。


你可能感兴趣的:(D3利用viewBox属性等比例缩放SVG图像)