search

Automattic / node-canvas

Node canvas is a Cairo backed Canvas implementation for NodeJS.
10.2k stars 1.17k forks source link

font family in svg not applied #2439

Open snaps-david opened 1 month ago

snaps-david commented 1 month ago 
<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
  <text y="20" font-family="Arial, Helvetica, sans-serif">Sans serif</text>
  <text x="100" y="20" font-family="monospace">Monospace</text>
</svg>

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?

snaps-david commented 1 month 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==

Image

However, when drawn on node canvas using the base64, font is not applied :(