forked from vanielf/pdf-lib
-
Notifications
You must be signed in to change notification settings - Fork 29
/
test25.html
177 lines (161 loc) · 20.8 KB
/
test25.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!doctype html>
<html lang="en">
<head>
<meta
http-equiv="Content-Security-Policy"
content="
default-src 'self' 'unsafe-inline' blob: resource:;
object-src 'self' blob:;
frame-src 'self' blob:;
"
/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" href="/apps/web/index.css" />
<title>Test 25</title>
<script type="text/javascript" src="/dist/pdf-lib.js"></script>
<script type="text/javascript" src="/apps/web/utils.js"></script>
</head>
<body>
<div id="button-container">
<button onclick="window.location.href = '/apps/web/test24.html'">
Prev
</button>
<button onclick="test()">Run Test</button>
<button onclick="window.location.href = '/apps/web/test26.html'">
Next
</button>
</div>
<!-- <div ></div> -->
<iframe id="iframe"></iframe>
</body>
<script type="text/javascript">
// startFpsTracker('animation-target');
const renderInIframe = (pdfBytes) => {
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
const blobUrl = URL.createObjectURL(blob);
document.getElementById('iframe').src = blobUrl;
};
async function test() {
const { PDFDocument, PDFPage, radians, StandardFonts, rgb, degrees } =
PDFLib;
const pdfDoc = await PDFDocument.create();
const firstPage = pdfDoc.addPage([1000, 1000]);
const fontSize = 20;
const svg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="409" height="602" viewBox="-9.746610357857302 -12.53611913758613 18.181818181818183 26.761502556123585" data-plugin-name="science" alt=" ">
<rect x="-9.746610357857302" y="-12.53611913758613" width="18.181818181818183" height="26.761502556123585" fill="#00ff00"/>
<g transform="scale(1 -1) translate(0 -1.689264280951324)">
<g transform="translate(-7.154396186440678 4.212791313559322) scale(1 -1) "><svg viewBox="0 0 32 32" width="4.576271186440678" height="4.110169491525422"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="692640ba-d133-4cb2-8c3e-d1483bb7141f" preserveAspectRatio="xMidYMid"><path d="M14.814 10.811a1.049 1.049 0 0 0-1.791-.742l-6.971 6.972 1.484 1.483 5.18-5.18v17.607c0 .58.47 1.049 1.049 1.049h9.084v-2.1h-8.035V10.81z" fill="#000000FF"></path><path d="M19.25 25.254V8.148l6.665-6.664L24.43 0l-6.97 6.971a1.05 1.05 0 0 0-.308.742v18.59c0 .58.47 1.05 1.05 1.05h7.745v-2.099h-6.696z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(1.955773305084744 0.017876059322032845) scale(1 -1) "><svg viewBox="0 0 32 32" width="3.8983050847457648" height="6.059322033898304"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="3b8642ac-fae7-4db2-ad01-f129efa090a9" preserveAspectRatio="xMidYMid"><path d="M16 2.395c-1.848 0-3.61.371-5.217 1.041V0H8.696v4.527C4.91 6.946 2.396 11.185 2.396 16s2.514 9.054 6.3 11.473V32h2.087v-3.436A13.53 13.53 0 0 0 16 29.604c1.848 0 3.61-.37 5.217-1.04V32h2.087v-4.527c3.786-2.419 6.3-6.658 6.3-11.473 0-7.502-6.102-13.605-13.604-13.605zm5.217 23.871a11.431 11.431 0 0 1-4.173 1.204v-6.654l.613.614 1.476-1.476L16 16.822l-3.133 3.132 1.476 1.476.614-.613v6.653a11.43 11.43 0 0 1-4.174-1.204V15.652h10.434v10.614zm2.087-1.367v-10.29c0-.577-.467-1.044-1.043-1.044H9.739c-.576 0-1.043.467-1.043 1.044v10.29A11.5 11.5 0 0 1 4.482 16a11.5 11.5 0 0 1 4.214-8.899v1.942c0 .577.467 1.044 1.043 1.044h8.309V8h-7.265V5.734c1.567-.8 3.34-1.252 5.217-1.252 6.35 0 11.517 5.167 11.517 11.518a11.5 11.5 0 0 1-4.213 8.898z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(-1.5188029661016937 4.9331302966101696) scale(1 -1) "><svg viewBox="0 0 32 32" width="2.203389830508474" height="1.7796610169491522"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="d05badb9-a4b7-4e30-8dc4-010b0d91bb35" preserveAspectRatio="xMidYMid"><path d="M26.113 14.583c-.454 0-.855.295-.99.728l-1.055 3.375-2.731-6.373 6.308-6.308v1.92h2.074V3.5c0-.573-.464-1.037-1.037-1.037h-4.424v2.074h1.92l-5.787 5.787a1.037 1.037 0 0 0-1.692.414l-.68 1.958-3.08 3.08-1.855-5.055a1.037 1.037 0 0 0-.974-.68h-.004a1.037 1.037 0 0 0-.973.688l-2.865 8.024-1.419-3.521a1.037 1.037 0 0 0-.962-.65H0v2.074h5.187l2.177 5.406c.122.303.376.524.68.61L2.646 28.07l1.466 1.466 9.998-9.997.915 2.494c.15.409.54.68.974.68h.01c.438-.004.826-.283.97-.697l2.8-8.067 3.487 8.135a1.037 1.037 0 0 0 1.944-.1l1.664-5.327H32v-2.074h-5.887zM9.642 21.075l2.482-6.95 1.2 3.268-3.682 3.681zm6.33-2.483-.245-.67.732-.731-.486 1.4z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(-8.552701271186441 5.568723516949152) scale(1 -1) "><svg viewBox="0 0 32 32" width="1.991525423728814" height="1.694915254237289"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="c209572f-73be-4e6c-8364-e7450affcfc3" preserveAspectRatio="xMidYMid"><path d="M4.522 14.957H.696v2.087h3.826V32h2.087V0H4.522v14.957zM19.13 0h-2.086v32h2.086V0zm12.175 14.956h-3.826v-8c0-.576-.468-1.043-1.044-1.043h-4.174c-.576 0-1.043.467-1.043 1.043v18.087c0 .577.467 1.044 1.043 1.044h4.174c.576 0 1.044-.467 1.044-1.044v-8h3.826v-2.087zM25.392 24h-2.087V8h2.087v16zM13.913 5.913H9.74c-.576 0-1.043.467-1.043 1.043v18.087c0 .577.467 1.044 1.043 1.044h4.174c.576 0 1.044-.467 1.044-1.044V6.956c0-.576-.468-1.043-1.044-1.043zM12.87 24h-2.087V8h2.087v16z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(2.294756355932204 4.721265889830509) scale(1 -1) "><svg viewBox="0 0 32 32" width="2.6694915254237284" height="2.1186440677966107"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="ba0d8b78-8ba9-45df-bb3f-33b4b16535b9" preserveAspectRatio="xMidYMid"><path d="M32 14.957H19.13V3.478h-2.086v25.044h2.086V17.043H32v-2.086zm-21.844-.001H0v2.087h10.156v7.305h2.087V7.652h-2.087v7.304z" fill="#000000FF"></path><path d="M24.695 11.826h2.087V9.39h2.435V7.304h-2.434V4.87h-2.088v2.435h-2.434v2.087h2.434v2.435z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(-8.256091101694915 -0.6600900423728806) scale(1 -1) "><svg viewBox="0 0 32 32" width="2.0338983050847457" height="2.88135593220339"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="0ca43c6b-17e5-4164-b08e-3481f886143b" preserveAspectRatio="xMidYMid"><path d="M29.235 24.283A19.266 19.266 0 0 0 16 19.043a19.266 19.266 0 0 0-13.235 5.24l1.428 1.52a17.183 17.183 0 0 1 10.764-4.63V32h2.087V21.173a17.183 17.183 0 0 1 10.763 4.63l1.428-1.52zm-.714-14.127H17.044V0h-2.087v10.156H3.478v2.087h25.043v-2.087z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(-4.5272775423728815 -2.185513771186441) scale(1 -1) "><svg viewBox="0 0 32 32" width="2.0338983050847457" height="2.7542372881355925"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="84ab8473-7175-4154-a097-0dfe720bcd40" preserveAspectRatio="xMidYMid"><g clip-path="url(#a)" fill="#000000FF"><path d="M32 14.957H21.844V3.478h-2.087v25.044h2.087V17.043H32v-2.086zm-21.844 0H0v2.086h10.156v11.479h2.087V3.478h-2.087v11.479z"></path></g><defs><clippath id="a"><path fill="#fff" d="M0 0h32v32H0z"></path></clippath></defs></svg></svg></g>
<g transform="translate(-0.7560911016949152 1.4585540254237284) scale(1 -1) "><svg viewBox="0 0 32 32" width="1.991525423728815" height="2.4576271186440675"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="23765d34-5f56-467f-ac87-07c9aafd3da3" preserveAspectRatio="xMidYMid"><path d="M29.425 0H16.384a1.04 1.04 0 0 0-1.041 1.04v7.782H12.74L2.949 5.056a1.041 1.041 0 0 0-1.415.971v19.946a1.041 1.041 0 0 0 1.415.971l9.792-3.766h2.602v7.781A1.04 1.04 0 0 0 16.383 32h13.042a1.04 1.04 0 0 0 1.04-1.04V1.04A1.04 1.04 0 0 0 29.426 0zM3.615 7.543l7.892 3.035v10.844l-7.891 3.035V7.543zm9.974 13.553V10.904h5.59v10.192h-5.59zm14.795 8.822h-10.96v-6.74h2.795a1.04 1.04 0 0 0 1.041-1.04V9.862a1.04 1.04 0 0 0-1.04-1.04h-2.796V2.081h10.96v27.836z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(6.828654661016948 5.441604872881356) scale(1 -1) "><svg viewBox="0 0 32 32" width="2.2033898305084776" height="2.5"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="f8c17d6b-18c7-4904-a6ca-4f8272358a07" preserveAspectRatio="xMidYMid"><path d="M8.348 14.957H3.13v2.087h5.218V32h2.087V0H8.348v14.957zm20.522-.001h-5.218v-8c0-.576-.467-1.043-1.044-1.043h-4.173c-.577 0-1.044.467-1.044 1.043v18.087c0 .577.467 1.044 1.044 1.044h4.174c.576 0 1.043-.467 1.043-1.044v-8h5.217v-2.087zM21.564 24h-2.087V8h2.087v16z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(5.345603813559324 1.373808262711865) scale(1 -1) "><svg viewBox="0 0 32 32" width="2.711864406779659" height="2.3305084745762716"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="46e95ee3-062d-496b-8043-fa8343b030c3" preserveAspectRatio="xMidYMid"><path d="M8.348 14.957H3.13v2.087h5.218V32h2.087V0H8.348v14.957zm20.522-.001h-5.218v-8c0-.576-.467-1.043-1.044-1.043h-4.173c-.577 0-1.044.467-1.044 1.043v18.087c0 .577.467 1.044 1.044 1.044h4.174c.576 0 1.043-.467 1.043-1.044v-8h5.217v-2.087zM21.564 24h-2.087V8h2.087v16z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(-0.9679555084745761 -1.4651747881355934) scale(1 -1) "><svg viewBox="0 0 32 32" width="2.3305084745762716" height="2.5"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="f85dbddc-8988-454d-a503-b92c7920e7f6" preserveAspectRatio="xMidYMid"><path d="M24.309 14.957V7.072h-2.087v7.885h-2.087V7.072h-2.087v7.541L7.124 7.891a1.043 1.043 0 0 0-1.59.888v6.178H0v2.086h5.533v6.177a1.043 1.043 0 0 0 1.59.889l10.925-6.723v7.541h2.087v-7.884h2.087v7.884h2.087v-7.884H32v-2.086h-7.691zM7.62 21.352V10.647L16.32 16l-8.7 5.353z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(-8.637447033898304 -4.643140889830509) scale(1 -1) "><svg viewBox="0 0 32 32" width="1.6949152542372872" height="1.4406779661016937"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="f47b94bb-45a7-42da-bd2c-00eccc98499f" preserveAspectRatio="xMidYMid"><path d="M28.286 14.957C27.755 8.644 22.448 3.669 16 3.669c-6.448 0-11.755 4.975-12.286 11.288H0v2.087h3.714C4.245 23.356 9.552 28.33 16 28.33c6.448 0 11.755-4.975 12.286-11.287H32v-2.087h-3.714zM16 26.244c-5.296 0-9.667-4.04-10.191-9.2h5.053l6.565-6.456L15.964 9.1l-5.956 5.857h-4.2C6.334 9.797 10.705 5.756 16 5.756s9.667 4.04 10.191 9.2h-4.626v2.088h4.626c-.524 5.16-4.895 9.2-10.191 9.2z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(-5.332362288135593 -5.236361228813559) scale(1 -1) "><svg viewBox="0 0 32 32" width="1.8644067796610173" height="1.6525423728813564"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="ea24a1b0-f673-4266-b43e-598ca93c5df3" preserveAspectRatio="xMidYMid"><path d="M21.906 14.957V0h-2.087v14.613L8.895 7.891a1.043 1.043 0 0 0-1.59.889v6.177H0v2.087h7.304v6.177a1.044 1.044 0 0 0 1.59.888l10.925-6.722V32h2.087V17.044H32v-2.088H21.906zM9.39 21.352V10.647L18.09 16l-8.7 5.353z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(-1.476430084745763 -5.236361228813559) scale(1 -1) "><svg viewBox="0 0 32 32" width="1.864406779661019" height="1.5677966101694913"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="cecb1976-4fea-4464-97d2-f5d8e48f0300" preserveAspectRatio="xMidYMid"><path d="M17.043 3.714V0h-2.087v3.714C8.644 4.245 3.67 9.552 3.67 16c0 6.448 4.975 11.755 11.287 12.286V32h2.087v-3.714c6.313-.531 11.288-5.838 11.288-12.286 0-6.448-4.975-11.755-11.288-12.286zM16 10.783a1.045 1.045 0 0 1 0 2.087 1.045 1.045 0 0 1 0-2.087zm0 10.434a1.045 1.045 0 0 1 0-2.087 1.045 1.045 0 0 1 0 2.087zm1.043 4.974V24h2.435v-2.087h-.877a3.112 3.112 0 0 0 .53-1.74A3.134 3.134 0 0 0 16 17.044a3.134 3.134 0 0 0-3.13 3.13c0 .644.195 1.242.528 1.74h-.876V24h2.434v2.191c-5.16-.524-9.2-4.895-9.2-10.191 0-5.296 4.04-9.667 9.2-10.191V8h-2.434v2.087h.876a3.113 3.113 0 0 0-.529 1.74 3.134 3.134 0 0 0 3.13 3.13 3.134 3.134 0 0 0 3.131-3.13c0-.644-.195-1.242-.529-1.74h.877V8h-2.435V5.809c5.16.524 9.2 4.895 9.2 10.191 0 5.296-4.04 9.667-9.2 10.191z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(-3.7221927966101696 5.992452330508474) scale(1 -1) "><svg viewBox="0 0 32 32" width="1.7796610169491522" height="1.398305084745763"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="261981c3-6cd4-448b-a0b2-7dc91a5fa40e" preserveAspectRatio="xMidYMid"><path d="M17.043 3.714V0h-2.087v3.714C8.644 4.245 3.67 9.552 3.67 16c0 6.448 4.975 11.755 11.287 12.286V32h2.087v-3.714c6.313-.531 11.288-5.838 11.288-12.286 0-6.448-4.975-11.755-11.288-12.286zM16 10.783a1.045 1.045 0 0 1 0 2.087 1.045 1.045 0 0 1 0-2.087zm0 10.434a1.045 1.045 0 0 1 0-2.087 1.045 1.045 0 0 1 0 2.087zm1.043 4.974V24h2.435v-2.087h-.877a3.112 3.112 0 0 0 .53-1.74A3.134 3.134 0 0 0 16 17.044a3.134 3.134 0 0 0-3.13 3.13c0 .644.195 1.242.528 1.74h-.876V24h2.434v2.191c-5.16-.524-9.2-4.895-9.2-10.191 0-5.296 4.04-9.667 9.2-10.191V8h-2.434v2.087h.876a3.113 3.113 0 0 0-.529 1.74 3.134 3.134 0 0 0 3.13 3.13 3.134 3.134 0 0 0 3.131-3.13c0-.644-.195-1.242-.529-1.74h.877V8h-2.435V5.809c5.16.524 9.2 4.895 9.2 10.191 0 5.296-4.04 9.667-9.2 10.191z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(1.3625529661016955 6.119570974576272) scale(1 -1) "><svg viewBox="0 0 32 32" width="1.7796610169491522" height="1.8220338983050866"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="422c40a5-1a29-48c9-8469-6693c47da282" preserveAspectRatio="xMidYMid"><path d="M23.304 4.527V0h-2.087v3.436A13.53 13.53 0 0 0 16 2.396c-1.848 0-3.61.37-5.217 1.04V0H8.696v4.527C4.91 6.946 2.396 11.185 2.396 16s2.514 9.054 6.3 11.473V32h2.087v-3.436A13.53 13.53 0 0 0 16 29.604c1.848 0 3.61-.37 5.217-1.04V32h2.087v-4.527c3.786-2.419 6.3-6.658 6.3-11.473s-2.514-9.054-6.3-11.473zM10.783 5.734c1.567-.8 3.34-1.252 5.217-1.252 1.877 0 3.65.452 5.217 1.252V8H10.783V5.734zm10.434 20.532c-1.567.8-3.34 1.252-5.217 1.252-1.877 0-3.65-.452-5.217-1.252V24h10.434v2.266zm2.087-1.367v-1.943c0-.576-.467-1.043-1.043-1.043H9.739c-.576 0-1.043.467-1.043 1.043v1.942A11.5 11.5 0 0 1 4.482 16a11.5 11.5 0 0 1 4.214-8.898v1.941c0 .577.467 1.044 1.043 1.044h12.522c.576 0 1.043-.467 1.043-1.044V7.102A11.5 11.5 0 0 1 27.518 16a11.5 11.5 0 0 1-4.214 8.898z" fill="#000000FF"></path><path d="M17.722 12.803 16 14.524l-1.722-1.721-1.475 1.475L14.524 16l-1.721 1.722 1.475 1.475L16 17.476l1.722 1.721 1.475-1.475L17.476 16l1.721-1.722-1.475-1.475z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(-4.5272775423728815 -0.914327330508474) scale(1 -1) "><svg viewBox="0 0 32 32" width="1.4406779661016955" height="1.0593220338983054"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="e774fe6d-1519-4016-84cc-6a43490a0e71" preserveAspectRatio="xMidYMid"><path d="M16 2.395c-1.848 0-3.61.371-5.217 1.041V0H8.696v4.527C4.91 6.946 2.396 11.185 2.396 16s2.514 9.054 6.3 11.473V32h2.087v-3.436A13.53 13.53 0 0 0 16 29.604c1.848 0 3.61-.37 5.217-1.04V32h2.087v-4.527c3.786-2.419 6.3-6.658 6.3-11.473 0-7.502-6.102-13.605-13.604-13.605zm5.217 23.871a11.431 11.431 0 0 1-4.173 1.204v-6.654l.613.614 1.476-1.476L16 16.822l-3.133 3.132 1.476 1.476.614-.613v6.653a11.43 11.43 0 0 1-4.174-1.204V15.652h10.434v10.614zm2.087-1.367v-10.29c0-.577-.467-1.044-1.043-1.044H9.739c-.576 0-1.043.467-1.043 1.044v10.29A11.5 11.5 0 0 1 4.482 16a11.5 11.5 0 0 1 4.214-8.899v1.942c0 .577.467 1.044 1.043 1.044h8.309V8h-7.265V5.734c1.567-.8 3.34-1.252 5.217-1.252 6.35 0 11.517 5.167 11.517 11.518a11.5 11.5 0 0 1-4.213 8.898z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(-8.679819915254237 1.7127913135593218) scale(1 -1) rotate(-90 1.0169491525423728 0.8898305084745761)"><svg viewBox="0 0 32 32" width="2.0338983050847457" height="1.7796610169491522"><svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="02f524b6-8a90-46d6-84e3-c440578cf982" preserveAspectRatio="xMidYMid"><path d="M27.375 25.012 25.3 12.667a2.422 2.422 0 0 0-2.395-2.014h-3.12c.365-.635.575-1.37.575-2.152 0-2.39-1.955-4.336-4.359-4.336-2.403 0-4.358 1.945-4.358 4.336 0 .783.209 1.517.575 2.152h-3.12c-1.187 0-2.2.851-2.395 2.015L4.625 25.014c-.118.7.08 1.42.542 1.962s1.139.86 1.853.86h17.962c.714 0 1.392-.318 1.853-.86a2.41 2.41 0 0 0 .54-1.964zM16.002 6.692c1.002 0 1.819.811 1.819 1.81 0 .998-.817 1.81-1.82 1.81a1.817 1.817 0 0 1-1.82-1.81c0-1 .817-1.81 1.82-1.81z" fill="#000000FF"></path></svg></svg></g>
<path id="aadb8040-c668-40d4-a65b-8982a52b6afb" stroke="#000000FF" stroke-width="0.13336296954878862" stroke-linecap="round" stroke-linejoin="round" fill="#000000FF" d="M-2.578125,2.2338453389830493 Q-1.9933792372881345,2.28469279661017, -1.5188029661016937,2.318591101694916 C-1.044226694915253,2.3524894067796622, -0.7306673728813546,2.369438559322034, -0.20524364406779583,2.4033368644067794 C0.320180084745763,2.4372351694915246, 0.7608580508474563,2.47113347457627, 1.1083156779661003,2.4880826271186427 C1.4557733050847443,2.5050317796610155, 1.3456038135593218,2.4965572033898287, 1.5320444915254239,2.4880826271186427 C1.718485169491526,2.4796080508474567, 1.8879766949152548,2.572828389830508, 2.0405190677966107,2.445709745762712 Q2.1930614406779667,2.3185911016949157, 2.294756355932204,1.8524894067796618Z"></path>
</g>
</svg>`;
const svg2 = `<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M300,200 H150 A150,150 0 1,0 300,50 z" fill="red"/>
<circle r="5" fill="black" cx="300" cy="200"/>
<circle r="5" fill="green" cx="150" cy="200"/>
<circle r="5" fill="blue" cx="300" cy="50"/>
</svg>`;
const svg3 = `<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="692640ba-d133-4cb2-8c3e-d1483bb7141f" preserveAspectRatio="xMidYMid">
<path d="M14.814 10.811a1.049 1.049 0 0 0-1.791-.742l-6.971 6.972 1.484 1.483 5.18-5.18v17.607c0 .58.47 1.049 1.049 1.049h9.084v-2.1h-8.035V10.81z" fill="#000000FF"/>
<circle r="0.3" fill="red" cx="14.8" cy="10.8"/>
</svg>`;
const svg4 = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="437" height="437" viewBox="-5.766990291262136 -11.939927184466018 8.349514563106796 8.194174757281553" style="width: 437px; height: 437px;">
<g transform="scale(1 -1) translate(0 0)">
<ellipse cx="-1.5000455013203968" cy="8.015083253349824" rx="2.5000000000000004" ry="2.426413513777" transform="rotate(0.34568480052757566 -1.5000455013203968 8.015083253349824)" stroke-width="0.04576659038901602" stroke="black" fill="none"/>
<ellipse cx="-2.5" cy="8.75" rx="0.20594965675057209" ry="0.20594965675057209" fill="#000000ff"/>
<ellipse cx="-0.5" cy="8.5" rx="0.20594965675057209" ry="0.20594965675057209" fill="#000000ff"/>
<path d="M -0.9955958173813108,6.843589816313437 A 0.9999999999999999,0.9999999999999999 0 0 0 -2.6956699856847175 7.174871904974261" stroke="#000000ff" stroke-width="0.13729977116704806" stroke-linecap="round" fill="none"/>
</g>
</svg>`;
// <path d="M19.25 25.254V8.148l6.665-6.664L24.43 0l-6.97 6.971a1.05 1.05 0 0 0-.308.742v18.59c0 .58.47 1.05 1.05 1.05h7.745v-2.099h-6.696z" fill="#000000FF"/>
const drawLines = (page) => {
Array(10)
.fill(1)
.map((v, i) => i)
.forEach((v) => {
page.drawText('----' + v, {
x: 5,
y: v * 100,
size: 20,
});
});
Array(100)
.fill(1)
.map((v, i) => i)
.forEach((v) => {
page.drawText(v % 5 == 0 ? '---' : '--', {
x: 5,
y: v * 10,
size: 20,
});
});
};
const drawGrid = (page) => {
Array(parseInt(page.getHeight() / 10))
.fill(1)
.map((v, i) => {
page.drawLine({
start: { x: 0, y: i * 10 },
end: { x: page.getWidth(), y: i * 10 },
});
});
Array(parseInt(page.getWidth() / 10))
.fill(1)
.map((v, i) => {
page.drawLine({
start: { x: i * 10, y: 0 },
end: { x: i * 10, y: page.getHeight() },
});
});
};
// drawGrid(firstPage)
drawLines(firstPage);
firstPage.drawSvg(svg, {
height: 602,
width: 409,
// height: 32,
// width: 32,
x: 100,
y: 700,
});
// firstPage.drawSvg(svg3, {
// height: 100,
// width: 100,
// x: 100,
// y: 700
// })
// firstPage.drawSvg(svg2, {
// height: 100,
// width: 100,
// x: 100,
// y: 500
// })
// firstPage.drawSvg(svg4, {
// height: 100,
// width: 100,
// x: 100,
// y: 400
// })
const pdfBytes = await pdfDoc.save();
renderInIframe(pdfBytes);
}
</script>
</html>