Invalid SVG? #551
-
On using the #set page(width: auto, height: auto, margin: 0em)
#set text(red); Hello, World The following svg is generated: <svg class="typst-doc" viewBox="0 0 59.000 8.000" width="59.000" height="8.000" data-width="59.000" data-height="8.000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml"><style type="text/css">.typst-text {
pointer-events: bounding-box;
}
.tsel span,
.tsel {
left: 0;
position: fixed;
text-align: justify;
white-space: nowrap;
width: 100%;
height: 100%;
text-align-last: justify;
color: transparent;
white-space: pre;
}
.tsel span::-moz-selection,
.tsel::-moz-selection {
color: transparent;
background: #7db9dea0;
}
.tsel span::selection,
.tsel::selection {
color: transparent;
background: #7db9dea0;
}
.pseudo-link {
fill: transparent;
cursor: pointer;
pointer-events: all;
}
svg {
fill: none;
}
.outline_glyph path,
path.outline_glyph {
fill: var(--glyph_fill);
stroke: var(--glyph_stroke);
}
.outline_glyph path,
path.outline_glyph {
transition: 0.2s fill stroke;
}
.hover .typst-text {
--glyph_fill: #66bab7;
--glyph_stroke: #66bab7;
}
.typst-jump-ripple,
.typst-debug-react-ripple {
width: 0;
height: 0;
background-color: transparent;
position: absolute;
border-radius: 50%;
}
.typst-jump-ripple {
border: 1px solid #66bab7;
}
.typst-debug-react-ripple {
border: 1px solid #cb1b45;
}
@keyframes typst-jump-ripple-effect {
to {
width: 10vw;
height: 10vw;
opacity: 0.01;
margin: -5vw;
}
}
@keyframes typst-debug-react-ripple-effect {
to {
width: 3vw;
height: 3vw;
opacity: 0.01;
margin: -1.5vw;
}
}
</style><defs class="glyph"><path id="gGXwVwQQ" class="outline_glyph" d="M 295 1348 Q 338 1348 370.5 1311 Q 403 1274 403 1198 Q 403 1139 396 1082.5 Q 389 1026 375.5 947 Q 362 868 354 803 Q 342 707 336 619.5 Q 330 532 328 485 Q 326 438 324 430 Q 320 389 295 389 Q 270 389 266 416 Q 264 428 260 493.5 Q 256 559 249 646 Q 242 733 233 803 Q 227 866 206.5 991 Q 186 1116 186 1198 Q 186 1274 219 1311 Q 252 1348 295 1348 Z M 186 88 Q 186 133 218 165 Q 250 197 295 197 Q 340 197 371.5 165 Q 403 133 403 88 Q 403 43 371.5 11.5 Q 340 -20 295 -20 Q 250 -20 218 11.5 Q 186 43 186 88 Z "/><path id="gGXwVwQ8" class="outline_glyph" d="M 213 195 Q 274 195 311 139.5 Q 348 84 348 -8 Q 348 -110 276.5 -182 Q 205 -254 106 -272 Q 88 -254 88 -223 Q 162 -205 215 -150.5 Q 268 -96 268 -59 Q 268 -4 195 4 Q 105 18 104 94 Q 104 137 135 166 Q 166 195 213 195 Z "/><path id="gGXwVwSs" class="outline_glyph" d="M 1266 250 Q 1266 127 1297.5 97.5 Q 1329 68 1444 63 Q 1454 53 1454 28.5 Q 1454 4 1444 -4 Q 1264 0 1180 0 Q 1098 0 913 -4 Q 905 4 905 28.5 Q 905 53 913 63 Q 1028 67 1060 97 Q 1092 127 1092 250 L 1092 657 L 391 657 L 391 250 Q 391 127 423 97.5 Q 455 68 569 63 Q 577 53 577.5 28.5 Q 578 4 569 -4 Q 389 0 305 0 Q 219 0 39 -4 Q 29 4 29 28.5 Q 29 53 39 63 Q 154 67 185.5 97 Q 217 127 217 250 L 217 1071 Q 217 1194 185.5 1223.5 Q 154 1253 39 1257 Q 29 1265 29 1290 Q 29 1315 39 1325 Q 195 1321 303 1321 Q 414 1321 569 1325 Q 577 1315 577.5 1290.5 Q 578 1266 569 1257 Q 454 1253 422.5 1223.5 Q 391 1194 391 1071 L 391 743 L 1092 743 L 1092 1071 Q 1092 1194 1060 1223.5 Q 1028 1253 913 1257 Q 905 1265 905 1290 Q 905 1315 913 1325 Q 1093 1321 1178 1321 Q 1276 1321 1444 1325 Q 1454 1315 1454 1290.5 Q 1454 1266 1444 1257 Q 1329 1253 1297.5 1223.5 Q 1266 1194 1266 1071 L 1266 250 Z "/><path id="gGXwVwUc" class="outline_glyph" d="M 707 254 L 707 643 Q 707 690 700.5 709.5 Q 694 729 672 754 Q 609 828 506 827 Q 383 827 315 725 Q 256 641 256 453 Q 256 273 323.5 174.5 Q 391 76 481 76 Q 561 76 674 174 Q 707 203 707 254 Z M 684 103 Q 534 -20 428 -20 Q 266 -20 173 100.5 Q 80 221 80 416 Q 80 635 221 776 Q 350 899 528 899 Q 559 899 596 890 Q 633 881 659.5 872.5 Q 686 864 688 864 Q 706 864 707 883 L 707 1145 Q 707 1211 703.5 1243.5 Q 700 1276 677.5 1291.5 Q 655 1307 643 1308 Q 631 1309 575 1313 Q 552 1336 563 1374 Q 745 1388 850 1430 Q 877 1430 877 1409 Q 869 1327 868 1194 L 868 266 Q 868 186 896 155.5 Q 924 125 1018 117 Q 1028 107 1028 88.5 Q 1028 70 1018 61 Q 854 43 776 -20 Q 758 -28 737 -20 Q 719 52 715 100 Q 713 110 702.5 110 Q 692 110 684 103 Z "/><path id="gGXwVwUg" class="outline_glyph" d="M 254 578 L 625 584 Q 656 584 655 612 Q 655 729 605 778 Q 555 827 485 827 Q 458 827 432 820 Q 406 813 368 790.5 Q 330 768 299 713 Q 268 658 254 578 Z M 791 190 Q 826 188 834 158 Q 697 -20 485 -20 Q 282 -20 172 111 Q 76 222 76 414 Q 76 631 206 763 Q 336 895 485 895 Q 831 895 831 539 Q 831 504 793 504 L 248 508 Q 248 336 313 227 Q 403 80 537 80 Q 623 80 677.5 104.5 Q 732 129 791 190 Z "/><path id="gGXwVwU8" class="outline_glyph" d="M 195 250 L 195 1145 Q 195 1258 174.5 1282.5 Q 154 1307 63 1313 Q 40 1336 51 1374 Q 233 1388 338 1430 Q 365 1430 365 1409 Q 357 1327 356 1194 L 356 250 Q 356 127 382 97.5 Q 408 68 504 63 Q 512 53 512 28.5 Q 512 4 504 -4 Q 369 0 276 0 Q 190 0 47 -4 Q 37 4 37 28.5 Q 37 53 47 63 Q 143 67 169 97 Q 195 127 195 250 Z "/><path id="gGXwVwVI" class="outline_glyph" d="M 84 420 Q 84 623 197 756 Q 319 899 518 899 Q 665 899 766.5 826.5 Q 868 754 908 653.5 Q 948 553 948 438 Q 948 224 815 94 Q 698 -21 514 -20 Q 309 -20 196.5 113 Q 84 246 84 420 Z M 487 827 Q 260 827 260 467 Q 260 401 275.5 333.5 Q 291 266 321.5 200.5 Q 352 135 409.5 93 Q 467 51 543 51 Q 633 51 702.5 125 Q 772 199 772 373 Q 772 592 696 709.5 Q 620 827 487 827 Z "/><path id="gGXwVwVU" class="outline_glyph" d="M 360 733 Q 360 723 366.5 719 Q 373 715 383 729 Q 424 799 484.5 849 Q 545 899 610 899 Q 669 899 701 867.5 Q 733 836 733 801 Q 733 762 703.5 730 Q 674 698 637 698 Q 599 698 563 746 Q 543 772 510 772 Q 485 772 416 672 Q 367 598 367 535 L 367 250 Q 367 127 394.5 99.5 Q 422 72 535 63 Q 545 53 545 28.5 Q 545 4 535 -4 Q 392 0 287 0 Q 197 0 53 -4 Q 45 4 45 28.5 Q 45 53 53 63 Q 153 69 179 98 Q 205 127 205 250 L 205 649 Q 205 735 181.5 757.5 Q 158 780 72 788 Q 60 823 68 846 Q 220 866 319 905 Q 335 905 344 889 Q 354 864 360 733 Z "/><path id="gGXwVwVo" class="outline_glyph" d="M 416 815 Q 345 811 333.5 781 Q 322 751 354 678 L 518 256 Q 532 221 539.5 213 Q 547 205 554 214 Q 561 223 575 260 L 719 623 L 706 655 Q 689 698 679 719 Q 669 740 650.5 765 Q 632 790 608 801 Q 584 812 549 815 Q 541 823 541 847.5 Q 541 872 549 883 Q 672 879 729 879 Q 811 879 934 883 Q 942 873 942 848 Q 942 823 934 815 Q 854 809 841.5 785.5 Q 829 762 859 690 L 1036 242 Q 1048 210 1057 211 Q 1066 212 1081 250 L 1253 676 Q 1267 710 1270.5 728 Q 1274 746 1269 768 Q 1264 790 1234 801 Q 1204 812 1149 815 Q 1139 823 1139 847.5 Q 1139 872 1149 883 Q 1272 879 1358 879 Q 1424 879 1505 883 Q 1515 873 1515.5 848 Q 1516 823 1505 815 Q 1433 811 1397 775.5 Q 1361 740 1332 668 L 1065 18 Q 1049 -25 1018 -25 Q 987 -25 969 16 L 758 524 L 551 20 Q 531 -25 502 -25 Q 471 -25 453 16 L 185 678 Q 152 759 123 783.5 Q 94 808 23 815 Q 13 823 12.5 847.5 Q 12 872 23 883 Q 129 879 209 879 Q 293 879 416 883 Q 426 873 426 848 Q 426 823 416 815 Z "/></defs><defs class="clip-path"></defs><style type="text/css"></style><g class="typst-page" transform="translate(0, 0)" data-tid="pidMMiu1T6aAlEiigEXNljw" data-page-width="59" data-page-height="8"><g data-tid="gidMMiu1T6aAlEiigEXNljw" class="typst-group"><g transform="translate(0.000,7.240)" data-tid="pAUep7u/ohogoq6PhDu/nSQ"><g data-tid="gAUep7u/ohogoq6PhDu/nSQ" class="typst-text" fill="#ff4136" transform="scale(0.0053710938,-0.0053710938)"><use x="0" href="#gGXwVwSs"/><use x="1495" href="#gGXwVwUg"/><use x="2410" href="#gGXwVwU8"/><use x="2950" href="#gGXwVwU8"/><use x="3490" href="#gGXwVwVI"/><use x="4502" href="#gGXwVwQ8"/><use x="4952" href="#gGXwVwQM"/><use x="5464" href="#gGXwVwVo"/><use x="6977" href="#gGXwVwVI"/><use x="8009" href="#gGXwVwVU"/><use x="8770" href="#gGXwVwU8"/><use x="9310" href="#gGXwVwUc"/><use x="10346" href="#gGXwVwQQ"/><g transform="scale(16,-16)"><foreignObject x="0" y="-114.44" width="683.44" height="128.00"><h5:div class="tsel" style="font-size: 128px">Hello, world!</h5:div></foreignObject></g></g></g></g></g><script type="text/javascript">const ignoredEvent=function(){const t={};let n,e;return function(i,u,r){e=new Date().getTime(),r=r||"ignored event",n=t[r]?e-t[r]:e,n>u&&(t[r]=e,i())}}(),fc=(t,n)=>{const e=[];for(let i=0;i<t.length;i++){const u=t[i];n(u)&&e.push(u)}return e},overLappingDom=(t,n)=>!(t.right<n.left||t.left>n.right||t.bottom<n.top||t.top>n.bottom),almostOverLapping=(t,n)=>{const e=t.getBoundingClientRect(),i=n.getBoundingClientRect();return overLappingDom(e,i)&&Math.abs(e.left-i.left)+Math.abs(e.right-i.right)<.5*Math.max(e.width,i.width)&&Math.abs(e.bottom-i.bottom)+Math.abs(e.top-i.top)<.5*Math.max(e.height,i.height)},gr=window.typstGetRelatedElements=t=>{let n=t.relatedElements;return n==null&&(n=t.relatedElements=searchIntersections(t)),n},getRelatedElements=t=>gr(t.target),findAncestor=(t,n)=>{for(;t&&!t.classList.contains(n);)t=t.parentElement;return t};function findGlyphListForText(t){const n=findAncestor(t,"typst-text");return n&&fc(n.children,e=>e.tagName==="use")}const searchIntersections=function(t){const n=findAncestor(t,"typst-group");return n&&fc(n.children,e=>almostOverLapping(e,t))};function nextNode(t){if(t.hasChildNodes())return t.firstChild;for(;t&&!t.nextSibling;)t=t.parentNode;return t?t.nextSibling:null}function getRangeSelectedNodes(t,n){var e=t.startContainer,i=t.endContainer;if(e==i){if(n(e))return[e];if(n(e.parentElement))return[e.parentElement]}for(var u=[];e&&e!=i;)e=nextNode(e),n(e)&&u.push(e);for(e=t.startContainer;e&&e!=t.commonAncestorContainer;)n(e)&&u.unshift(e),e=e.parentNode;return u}function getSelectedNodes(t){if(window.getSelection){var n=window.getSelection();if(!n.isCollapsed){if(n.rangeCount===1)return getRangeSelectedNodes(n.getRangeAt(0),t);let e=[];for(let i=0,u=n.rangeCount;i<u;i++)e.push(...getRangeSelectedNodes(n.getRangeAt(i),t));return e}}return[]}function getGlyphLenShape(t){return t.map(n=>{const e=n.getAttribute("href"),i=document.getElementById(e.slice(1));return 1+Number.parseInt(i?.getAttribute("data-liga-len")||"0")})}function getGlyphAdvanceShape(t){return t.map(n=>Number.parseInt(n.getAttribute("x")||"0"))}function adjsutTextSelection(t,n){t.addEventListener("copy",s=>{const c=getSelectedNodes(d=>d.classList?.contains("tsel")||d.classList?.contains("tsel-tok")||d.classList?.contains("typst-content-hint")),g=[];let o=!1;for(let d of c)if(d.classList.contains("tsel"))d.hasAttribute("data-typst-layout-checked")||g.push(d.textContent),o=!0;else if(d.classList.contains("tsel-tok"))g.push(d.textContent);else if(o){const v=String.fromCodePoint(Number.parseInt(d.getAttribute("data-hint")||"0",16))||`
`;g.push(v),o=!0}const m=g.join("").replace(/\u00a0/g," ");console.log("user copy",m),navigator?.clipboard?navigator.clipboard.writeText(m):s.clipboardData.setData("text/plain",m),s.preventDefault()});const e=s=>s.nodeType===Node.TEXT_NODE?s.parentElement:s,i=s=>{const c=e(s);return c?.classList?.contains("tsel")?c:void 0},u=s=>`<div style="position: absolute; float: left; left: ${s.left+window.scrollX}px; top: ${s.top+window.scrollY}px; width: ${s.width}px; height: ${s.height}px; background-color: #7db9dea0;"></div>`,r=s=>{s&&(s.innerHTML="")};let S=!1;window.addEventListener("mousedown",s=>{s.button===0&&(S=!0)}),window.addEventListener("mouseup",s=>{s.button===0&&(S=!1)}),t.addEventListener("mousemove",s=>{S&&ignoredEvent(()=>{p(s)},2,"doc-text-sel")});function p(s){s.target?.classList.contains("tsel-tok")||f(!0,s)}document.addEventListener("selectionchange",()=>f(!1));function f(s,c){const g=window.getSelection();let o=document.getElementById("tsel-sel-box");if(!g?.rangeCount){r(o);return}const m=g.getRangeAt(0),d=g.getRangeAt(g.rangeCount-1);if(!m||!d)return;const v=l=>l?.classList.contains("text-guard")||l?.classList.contains("typst-page")||l?.classList.contains("typst-search-hint"),C=v(e(m.startContainer)),y=v(e(d.endContainer));if(C||y){C&&y&&r(o);return}r(o),o||(o=document.createElement("div"),o.id="tsel-sel-box",o.style.zIndex="100",o.style.position="absolute",o.style.pointerEvents="none",o.style.left="0",o.style.top="0",o.style.float="left",document.body.appendChild(o));const N=i(m.startContainer),L=i(d.endContainer),k=getSelectedNodes(l=>l.classList?.contains("tsel")||l.classList?.contains("typst-search-hint")||l.classList?.contains("tsel-tok")),A=new Range,E=[],T=(l,a,h)=>{A.setStartBefore(l),A.setEndAfter(a),E.push(u(A.getBoundingClientRect()))},b=new Map;for(let l of k)if(l.classList.contains("tsel-tok")){const a=l.parentElement,h=Array.from(a.children).indexOf(l);if(!b.has(a))b.set(a,[h,h]);else{const[w,x]=b.get(a);b.set(a,[Math.min(w,h),Math.max(x,h)])}}else if(l.classList.contains("tsel")&&!l.hasAttribute("data-typst-layout-checked")){const a=l===N?m.startOffset:0,h=l===L?d.endOffset-1:-1;b.set(l,[a,h])}if(s){let l=1e11,a=-1;for(const h of b.keys()){const w=h.getAttribute("data-selection-index");if(!w)continue;const x=Number.parseInt(w);l=Math.min(l,x),a=Math.max(a,x)}if(a!==-1){const h=c.clientX,w=c.clientY,x=n.flow;for(;;){const R=x[a],M=R.getBoundingClientRect();if((h>M.right||w>M.bottom)&&(b.set(R,[0,-1]),a+1<x.length)){a+=1;const O=x[a].getBoundingClientRect();if(M.bottom>O.top&&M.top<O.bottom)continue}break}}}for(let[l,[a,h]]of b){const w=findGlyphListForText(l);if(!w?.length)continue;if(a===0&&h===-1){T(w[0],w[w.length-1],h);continue}const x=getGlyphLenShape(w),R=O=>{let j=0;for(let P=0;P<x.length;P++){if(j+x[P]>O)return w[P];j+=x[P]}};let M=w[0];a!==0&&(M=R(a)||M);let B=w[w.length-1];h!==-1&&(B=R(h)||B),T(M,B,h)}o.innerHTML=E.join("")}}function createPseudoText(t){const n=document.createElementNS("http://www.w3.org/2000/svg","foreignObject");n.setAttribute("width","1"),n.setAttribute("height","1"),n.setAttribute("x","0"),n.setAttribute("y","0");const e=document.createElement("span");return e.textContent=" ",e.style.width=e.style.height="100%",e.style.textAlign="justify",e.style.opacity="0",e.classList.add(t),n.append(e),n}const linkmove=t=>ignoredEvent(()=>gr(t.target)?.forEach(n=>n.classList.add("hover")),200,"mouse-move"),linkleave=t=>gr(t.target)?.forEach(n=>n.classList.remove("hover"));window.typstProcessSvg=function(t,n){let e={flow:[]};for(var i=t.getElementsByClassName("pseudo-link"),u=0;u<i.length;u++){var r=i[u];r.addEventListener("mousemove",linkmove),r.addEventListener("mouseleave",linkleave)}const S=n?.layoutText??!0;if(S&&(setTimeout(()=>{const p=document.createElement("style");p.innerHTML=`.tsel { font-family: monospace; text-align-last: left !important; -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; }
.tsel span { float: left !important; position: absolute !important; width: fit-content !important; top: 0 !important; }
.typst-search-hint { font-size: 2048px; color: transparent; width: 100%; height: 100%; }
.typst-search-hint { color: transparent; user-select: none; }
.typst-search-hint::-moz-selection { color: transparent; background: #00000001; }
.typst-search-hint::selection { color: transparent; background: #00000001; }
.tsel span::-moz-selection,
.tsel::-moz-selection {
background: transparent !important;
}
.tsel span::selection,
.tsel::selection {
background: transparent !important;
} `,document.getElementsByTagName("head")[0].appendChild(p);const f=window.devicePixelRatio||1;t.style.setProperty("--typst-font-scale",f.toString()),window.addEventListener("resize",()=>{const s=window.devicePixelRatio||1;t.style.setProperty("--typst-font-scale",s.toString())}),window.layoutText(t,e)},0),adjsutTextSelection(t,e)),t.addEventListener("click",p=>{let f=p.target;for(;f;){const s=f.getAttribute("data-span");if(s){console.log("source-span of this svg element",s);const c=document.body||document.firstElementChild,g=c.getBoundingClientRect(),o=window.innerWidth||0,m=p.clientX-g.left+.015*o,d=p.clientY-g.top+.015*o;triggerRipple(c,m,d,"typst-debug-react-ripple","typst-debug-react-ripple-effect .4s linear");return}f=f.parentElement}}),S&&t.querySelectorAll(".typst-page").forEach(p=>{p.prepend(createPseudoText("text-guard"))}),window.location.hash){const f=window.location.hash.split("-");if(f.length===2&&f[0]==="#loc"){const s=f[1].split("x");if(s.length===3){const c=Number.parseInt(s[0]),g=Number.parseFloat(s[1]),o=Number.parseFloat(s[2]);window.handleTypstLocation(t,c,g,o)}}}},window.layoutText=function(t,n){const e=Array.from(t.querySelectorAll(".tsel"));n.flow=e;const i=performance.now(),u=document.createElementNS("http://www.w3.org/1999/xhtml","canvas").getContext("2d");u.font="128px sans-serif";const r=u.measureText("A").width,S=[],p=(s,c)=>{const g=e.slice(s,c);s-=1;for(let o of g)if(s+=1,!o.getAttribute("data-typst-layout-checked")&&(o.setAttribute("data-selection-index",s.toString()),o.setAttribute("data-typst-layout-checked","1"),o.style.fontSize)){const m=o.parentElement,d=o.innerText,v=m.cloneNode(!0),C=v.firstElementChild;C&&(C.className="typst-search-hint"),m.parentElement.insertBefore(v,m),S.push([o,d]);const y=findGlyphListForText(o);if(!y)continue;const N=getGlyphLenShape(y),L=getGlyphAdvanceShape(y).map(b=>b/16);let k=!1;const A=[];let E=0,T=0;for(let b of d){if(E>=L.length){k=!0;break}let l=L[E];N[E]>1&&(l+=T*r),T++,T>=N[E]&&(E++,T=0);const a=document.createElement("span");a.textContent=b,a.classList.add("tsel-tok"),a.style.left=`${l}px`,A.push(a)}if(k)continue;o.innerHTML="",o.append(...A)}console.log(`layoutText ${e.length} elements used since ${performance.now()-i} ms`)},f=100;for(let s=0;s<e.length;s+=f){const c=s;setTimeout(()=>{p(c,c+f)})}},window.handleTypstLocation=function(t,n,e,i,u){const r=u?.behavior||"smooth",S=window.assignSemaHash||((c,g,o)=>{location.hash=`loc-${c}x${g.toFixed(2)}x${o.toFixed(2)}`}),p=findAncestor(t,"typst-doc");if(!p){console.warn("no typst-doc found",t);return}const f=p.children;let s=0;for(let c=0;c<f.length;c++)if(f[c].tagName==="g"&&s++,s==n){const g=window.innerWidth*.01,o=window.innerHeight*.01,m=f[c],d=Number.parseFloat(p.getAttribute("data-width")||p.getAttribute("width")||"0")||0,v=Number.parseFloat(p.getAttribute("data-height")||p.getAttribute("height")||"0")||0,C=p.getBoundingClientRect(),y={left:C.left,top:C.top,width:C.width,height:C.height},N=7*g,L=38.2*o,k=m.transform.baseVal.consolidate()?.matrix;k&&(y.left+=k.e/d*y.width,y.top+=k.f/v*y.height);const A=document.body||document.firstElementChild,E=A.getBoundingClientRect(),T=y.left-E.left+e/d*y.width-N,b=y.top-E.top+i/v*y.height-L,l=T+N,a=b+L;window.scrollTo({behavior:r,left:T,top:b}),r!=="instant"&&triggerRipple(A,l,a,"typst-jump-ripple","typst-jump-ripple-effect .4s linear"),S(s,e,i);return}};function triggerRipple(t,n,e,i,u){const r=document.createElement("div");r.className=i,r.style.left=`${n}px`,r.style.top=`${e}px`,t.appendChild(r),r.style.animation=u,r.onanimationend=()=>{t.removeChild(r)}}var scriptTag=document.currentScript;if(scriptTag){console.log("new svg util updated 37 ",performance.now());const t=findAncestor(scriptTag,"typst-doc");t&&window.typstProcessSvg(t)}
</script></svg> On saving this svg in a file and opening it in a browser, the following error is shown: (No such error exists in direct svg export from the |
Beta Was this translation helpful? Give feedback.
Answered by
Myriad-Dreamin
Jul 15, 2024
Replies: 1 comment
-
The default SVG export of typst.ts assumes it is under browser environment, i.e. it is as a inline element of HTML DOM. If you want to export to some "more plain" SVG, you can use: $typst.svg({ data_selection: { js: false } }) |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
dipamsen
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The default SVG export of typst.ts assumes it is under browser environment, i.e. it is as a inline element of HTML DOM. If you want to export to some "more plain" SVG, you can use: