remanso-space/remanso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(svg): cover full viewBox with export background

Browse Source 
The white background rect was anchored at 0,0, but a diagram's viewBox
origin can be negative (content drawn above y=0, e.g. a QFD house roof),
leaving that content outside the fill. Anchor the rect to the viewBox
origin so the whole drawing sits on white in PNG/SVG exports.
This commit is contained in:
Julien Calixte
2026-06-18 00:19:38 +02:00
parent e24f75a1cb
commit 826f7a4ec9
1 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/utils/svgDownload.ts
View File

@@ -71,17 +71,22 @@ const buildExportableSvgString = (svg: SVGSVGElement): string => {
clone.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink")
const { width, height } = getSvgPixelSize(svg)
const viewBox = svg.viewBox?.baseVal
const originX = viewBox && viewBox.width > 0 ? viewBox.x : 0
const originY = viewBox && viewBox.height > 0 ? viewBox.y : 0
if (!clone.getAttribute("viewBox")) {
clone.setAttribute("viewBox", `0 0 ${width} ${height}`)
clone.setAttribute("viewBox", `${originX} ${originY} ${width} ${height}`)
}
clone.setAttribute("width", String(width))
clone.setAttribute("height", String(height))
// Cover the full viewBox (its origin can be negative — e.g. a diagram whose
// content extends above y=0), otherwise that content falls outside the fill.
const bg = document.createElementNS(SVG_NS, "rect")
bg.setAttribute("x", "0")
bg.setAttribute("y", "0")
bg.setAttribute("width", "100%")
bg.setAttribute("height", "100%")
bg.setAttribute("x", String(originX))
bg.setAttribute("y", String(originY))
bg.setAttribute("width", String(width))
bg.setAttribute("height", String(height))
bg.setAttribute("fill", "#ffffff")
clone.insertBefore(bg, clone.firstChild)