Open snaps-david opened 2 weeks ago
<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
<text y="20" font-family="cursive">Sans serif</text>
<text x="100" y="20" font-family="monospace">Monospace</text>
</svg>
I tried with cursive font here.
This was converted to base64 below
data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAwIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDx0ZXh0IHk9IjIwIiBmb250LWZhbWlseT0iY3Vyc2l2ZSI+U2FucyBzZXJpZjwvdGV4dD4KICA8dGV4dCB4PSIxMDAiIHk9IjIwIiBmb250LWZhbWlseT0ibW9ub3NwYWNlIj5Nb25vc3BhY2U8L3RleHQ+Cjwvc3ZnPg==
However, when drawn on node canvas using the base64, font is not applied :(
const svgData =
data:image/svg+xml;base64,${Buffer.from(svgString).toString('base64')}
; const img = await loadImage(svgData); ctx.drawImage(img, 0, 0, canvas.width, canvas.height);It does draw text on canvas, but font family is not applied.
Anybody experiencing the same issue?