我有這段代碼可以制作 SVG 并將其繪制到畫布上。
Jsbin鏈接：
如何使影像/畫布僅呈現 HTML 而沒有額外空間？
uj5u.com熱心網友回復：
在您的影像渲染函式 onTempImageLoad(e) 中，您可以添加：
function onTempImageLoad(e) {
canvas.width = tempImg.width;
canvas.height = tempImg.height;
ctx.drawImage(e.target, 0, 0);
targetImg.src = canvas.toDataURL();
}
但是您需要檢查您的 svg，因為它包含額外的空格。它似乎是 300x150，您可以通過替換 width="100%" 和 height="100%" 來設定 svg 的像素大小來做一些測驗。
tempImg.src =
"data:image/svg xml,"
encodeURIComponent(
'<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml"><style>em{color:red;}</style><em>I</em> lick <span>cheese</span></div></foreignObject></svg>'
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/536430.html
標籤：javascript网页格式CSSsvghtml5-画布
上一篇：在JS中動態創建SVG路徑