svg整體縮放至指定大小

一、問題

svg畫面跑在分辨率低的電腦上，導致不能完全顯示。

二、要求

svg要能夠根據電腦的屏幕大小自動縮放至適配電腦的尺寸。

三、實現

 1.獲取本機窗口高度、寬度

let clientWidth = document.documentElement.clientWidth,
    clientHeight = document.documentElement.clientHeight;

2.獲取縮放比例（svg大小設為x，y）

let widthScale = clientWidth / x, heightScale = clientHeight / y;

3.svg整體縮放

svg的特點是：縮放后，元素的中心坐標也會跟着變化縮放，所以元素的位置會偏移。為防止這種偏移，對svg不僅僅要進行scale（縮放），還要進行translate（中心平移）。

測試后發現縮放倍數x與平移坐標y的關系成一次函數：y = 0.5x - 0.5；

於是得出公式：

svg.setAttribute("transform", `
    translate(${ x * (widthScale - 1) / 2}, ${ y * (heightScale - 1) / 2})
    scale(${widthScale}, ${heightScale})
`);

此時，svg圖像會鋪滿電腦屏幕。

 四、功能延展

 有時，svg圖像不僅僅是為了適配屏幕，而是可以動態放大縮小； 

 此時，先給定一個原始大小：height，width，方便以此為基准進行縮放

barChart.setAttribute('width', barChartWidth); 
barChart.setAttribute('height', barChartHeight);

再給定自由設置svg大小的變量：

let svgW = 60, svgH = 20;

算出縮放比例：

let widthScale = svgW / barChartWidth, heightScale = svgH / barChartHeight;

進行縮放：

// 縮放要注意的是
// 1.把新生成的svg中心坐標重新定位到頁面左上角
// 2.大小按比例同時縮放

barChart.setAttribute("transform", `
    translate(${ barChartWidth * (widthScale - 1) / 2}, ${ barChartHeight * (heightScale - 1) / 2})
    scale(${widthScale}, ${heightScale})
`);

最終效果：

1. 設svgW = 60, svgH = 20; （找得到svg在哪嗎？）

2. 設svgW = 180, svgH = 60;

3. 設svgW = 600, svgH = 200;

大功告成~