dict/alar.ink
2
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: logic to construct SVG

Browse Source
This commit is contained in:
Aditya
2025-12-02 23:45:55 +05:30
parent 0532643cd8
commit 83221c3132
1 changed files with 59 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
static/share.js
View File

@@ -25,11 +25,66 @@ async function screenshotDOM(el, opts = {}) {
if (background !== 'transparent') clone.style.background = background;
if (!clone.getAttribute('xmlns')) clone.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
const word = el.querySelector("h3").textContent.trim();
const phonetic = el.querySelector(".pronun").textContent.trim();
const [types, ...defs] = [...el.querySelectorAll("ol.defs li")].map(node => node.textContent.trim());
const xhtml = new XMLSerializer().serializeToString(clone);
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
<foreignObject x="0" y="0" width="100%" height="100%">${xhtml}</foreignObject>
</svg>`;
const vOffset = 48;
const svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="720" height="240" viewBox="0 0 720 240">
<style>
.card { fill: #ffffff; stroke: #e5e7eb; stroke-width: 1.2; rx: 10; ry: 10; }
.headword {
font-family: "Noto Sans Kannada", "Noto Sans", sans-serif;
font-size: 28px;
font-weight: 700;
fill: #111827;
}
.pron {
font-family: "Noto Sans", sans-serif;
font-size: 15px;
fill: #6b7280;
}
.pos {
font-family: "Noto Sans", sans-serif;
font-size: 15px;
font-weight: 600;
fill: #374151;
}
.def {
font-family: "Noto Sans", sans-serif;
font-size: 16px;
fill: #111827;
}
.num {
font-family: "Noto Sans", sans-serif;
font-size: 16px;
fill: #6b7280;
}
</style>
<!-- Card background -->
<rect x="8" y="8" width="704" height="224" rx="10" ry="10" class="card"/>
<!-- Content -->
<g transform="translate(32,36)">
<!-- Headword -->
<text class="headword" x="0" y="0">${word}</text>
<!-- Pronunciation -->
<text class="pron" x="0" y="30">${phonetic}</text>
<!-- POS -->
<text class="pos" x="0" y="72">${types}</text>
<!-- Definition 1 -->
${defs.map((def, idx) => `
<text class="num" x="0" y="${112 + idx * vOffset}">${idx + 1}.</text>
<text class="def" x="24" y="${112 + idx * vOffset}">${def}</text>
`)}
</g>
</svg>
`;
const svgBlob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(svgBlob);