svg渲染右上角缺少一个角或者下方被裁切

记录一个问题：

MathJax渲染一个文本或者公式，然后输出svg，再把svg按照一个的缩放比例转换成bitmap，发现放大后的bitmap显示不全，

实现过程：

1、在android里面定义一个webview，加载一个html页面，在页面里面加载。

<script type="text/javascript" src="./js/tex-svg.js" id="MathJax-script" async></script>

2、定义<script>方法

function exportImage(math, dpi) {
try {
var result = MathJax.tex2svg(`${math}`, { display: true })
let svg = result.getElementsByTagName("svg")[0]

var viewBox = svg.getAttribute('viewBox')
var viewBoxArr = viewBox.split(' ')
viewBoxArr[2] = Number(viewBoxArr[2]) + 50
viewBoxArr[3] = Number(viewBoxArr[3]) + 50
svg.setAttribute('viewBox', viewBoxArr.join(' '))


var image = new Image()
image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svg.outerHTML));
image.onload = function () {
var canvas = document.createElement('canvas');

canvas.width = Math.round(image.width * dpi);;
canvas.height = Math.round(image.height * dpi);

 

var context = canvas.getContext('2d');
context.scale(dpi, dpi);
context.drawImage(image, 0, 0);

var img = document.createElement('img')
img.src = canvas.toDataURL('image/png')
document.body.appendChild(svg.outerHTML) //svg原图
document.body.appendChild(img)    //缩放后的bitmap

}
image.onerror = function () {

}
} catch (error) {

}
}

3、原因就是第2步，svg的viewBox可视图不够导致，通过js动态扩展修改宽和高来增加可视区域，这个时候缩放就正常了。

4、如何渲染到页面，使用参考：MathJax v3 with interactive TeX input and SVG output