forked from jgraph/drawio-integration
-
Notifications
You must be signed in to change notification settings - Fork 0
/
javascript.html
34 lines (32 loc) · 11.7 KB
/
javascript.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
<html>
<head>
<script type="text/javascript" src="diagram-editor.js"></script>
</head>
<body>
Example JavaScript API for editing static PNG and SVG images, objects with data URIs and SVG DOM with embedded XML.
<br>
Click on the images below to start editing.
<br>
<br>
PNG Image:<br>
<img style="cursor:pointer;" title="Click to edit image" onclick="DiagramEditor.editElement(this);"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHkAAAA9CAYAAACJM8YzAAAEHXRFWHRteGZpbGUAJTNDbXhmaWxlJTIwaG9zdCUzRCUyMnd3dy5kcmF3LmlvJTIyJTIwbW9kaWZpZWQlM0QlMjIyMDIwLTAxLTI3VDE1JTNBMjclM0ExMy4wMzFaJTIyJTIwYWdlbnQlM0QlMjJNb3ppbGxhJTJGNS4wJTIwKE1hY2ludG9zaCUzQiUyMEludGVsJTIwTWFjJTIwT1MlMjBYJTIwMTBfMTRfNiklMjBBcHBsZVdlYktpdCUyRjUzNy4zNiUyMChLSFRNTCUyQyUyMGxpa2UlMjBHZWNrbyklMjBDaHJvbWUlMkY3OS4wLjM5NDUuMTMwJTIwU2FmYXJpJTJGNTM3LjM2JTIyJTIwZXRhZyUzRCUyMlBlU3NNal95V082dGFwQVFTNGx2JTIyJTIwdmVyc2lvbiUzRCUyMjEyLjUuOCUyMiUzRSUzQ2RpYWdyYW0lMjBpZCUzRCUyMmVtWVJTRERSa0RQMllkM0VaeTNyJTIyJTIwbmFtZSUzRCUyMlBhZ2UtMSUyMiUzRWpaTk5qNXN3RUlaJTJGRGNjaXNCTkNqbTJhN0Y3MjBsVGE4MkFHYk5YZ3lFd1c2SyUyQnZYZXdsN0twU0pRVDJNeDhlWmw0biUyRk5STlR4WnU4c1hVcUJPVzFWUEN2eWVNNVVWUnVvOG44MEtPTElEV3FucEIyUXF1NmplR3lFanZxc1loc0FXUk1aclViUXVGNlhzVXRHRmdyUm0zYm8zUjIxTnYwT0xHdzRPckFQMlp2cXFhNUVKTFZxejhHVlVyNDhsNWNWd3NGWWhmclRYM1BwelhteDRYU3djeFRhaGhrRkNiY1lOd29vdnBLUlQlMkZDcHBNNnh1YzdNJTJCU3lQJTJGNzE0UmQzTk00TDYwcUMzWk9qVzBkZ1dGQUY3aVklMkZIZGNvOW1GY2RobHhiRVVkVjVWNWE0NThxdzZRRmFXTzVIekhSUSUyQlFjV0tEUFpGdzZweXo2cEQyWlE1Z3VEOGdCbXdSamlYdGFBZjJONDEyTlJRa3h4T0wyRGZuQUElMkJGam1PWXlwZ2dCNXJTSVY4cUcwSiUyQkJLemtNdmklMkZwJTJCZkUzNnl4dEN5NnFZVGFpJTJCcnJXSXUlMkY3Q0drUTAweHlIR1dWbnM2Yjh5eENHJTJCZ2I2SEhEJTJCbEdyeUxmNEZYSVE2VWZqcHBsSXJ3ZWdQaDk2TnJVTUslMkZTZXEwMiUyQlZ1R2JLaUpadyUyQjZHdXRMWDl2Z2J0VmFEb2tPenVYRUJBVk1tJTJCMzR5ck9QREw1SU13aU1BaVNhdDhUcjMxd2k5Q0t1RjFuOE5mMmNNZjUlMkJROCUzRCUzQyUyRmRpYWdyYW0lM0UlM0MlMkZteGZpbGUlM0Utwh6oAAAFVklEQVR4Xu2bbSiebRjH/3d8EBHzkkI2m6iJiJRSEsm2NG1D7YPhK/L2DZGXyMvMTI3ImLW1KcnL2LyHpIjIImNsZibUpi3GPB1nz+1xz8tz38TjcR7nF3If53ld///v+p/ncalbAWAbPM61AwqC/Pv373MtUmZxWlpa2wLy9jaH+Tw+CMSVIZ9Hsrs0MeRzDpjkMWSGLIEDEkjkJDNkCRyQQCInmSFL4IAEEjnJDFkCBySQyElmyBI4IIFETjJDlsABCSRykhmyBA5IIJGTzJAlcEACiZxkhiyBAxJI5CQzZAkckEDimUoy3czW1ha0tbUlsP70JJ4q5Pn5eVhaWh6o7u3btwgLC8PHjx/31KSmpuLDhw948uSJWu5oWq/WogBmZ2cxMDCAO3fuqDtFpe64849y0VOFTCldXFwU9zkyMoJr166JnyYmJuJv4+PjB0KemZnB+vo67O3t1dKpab1aiwKor69HTEwM3r9/r+4Ulbrjzj/KRU8V8u4bHBwchKurK75+/QpTU1PxUWtrK+7evYuIiAg8ffoUZmZmKCkpEXXl5eX48uULEhMTUVtbi4cPH4LWuHnzJh49egQDAwMV/ZrW0+SsrCxUV1djc3MT169fR25uLn3zYGddenB8fHwwPT2NW7duoaamRqQ6ISEBExMT8PPzQ0FBAYyNjbG6ugraTV68eCEe4uzsbDg4OOyZfxRoms45c5B9fX0RGBiI8PBwYRh9P6ujowMpKSkgk+/fvy8eipcvX8LIyAjx8fEIDQ1FXFycinZN60dHRwWA0tJSsS5tx48fPxb3ohw/fvxAYWEhHjx4gNevX8PCwgLm5uaIiorC7du3kZOTg2/fvqG7uxt5eXnioc3MzERzczOSkpKwsrIi1lTOd3Fx0ZTXkerPJOS1tTXo6ekJI4ODg4VxSmgZGRmwtrZGUVER7t27J4z7+fMn7Ozs9oWsbv27d+9E+tzd3fHp0ycBmdJM1909dm+3BCs/Px9zc3NQKBQizXScLCwsID09Hf39/aisrMTVq1fR29sLgtrW1nas7f4olM8cZNquled2T08PPD09xdc8lJCrqqqEsbRF0iAQlHhbW9t9IatbT80eHQV0TOjr64u1aJc4DDIlmI6KPwftCoaGhggJCRFwbWxsEBsbi8jIyGOf6ecC8u7uej/IBJQSZ2Vlhb6+PgGBfn/27Nm+kNWtJwiUPDpDaacICgoSCTwMcnJyMlpaWtDZ2Smu/evXL4yNjcHNzQ2Tk5O4dOkSlpeXUVdXh+joaNFYTk1NcZL/DTJ1tl5eXhgeHhYJIQjUgDU0NOwLWd36GzduCCh0DAwNDYlr0Ny0tDSVdRsbG0W/QK+D7e3totnq6uoSYKlRKy4uFp/RGe3o6Ah6EL5//y6aMVr38+fPO/NpYdoJAgIChJaTGmduuz4MMr1j0nsypezVq1ei+6ZtsaKiAh4eHnsga1L/5s0bAYYGNXb0ekcA6GFycnLaWZsgOTs7i+vSGUxbOjWDNOh+nj9/Dm9vb9Es0k/l1k/3XFZWJiAr59Paurq6aGpqgr+//0kx/v9+q5EAbmxs7DmLD3JKnXp6DycIFy9eFI3U0tISLly4oPIaRevTKxY1e0qAVEd9xJUrV6Cjo7NzC9Qw0j9wLl++LBpJ5fhz/onR/Xvh/yzJJy2M1//HAYYswdPAkBmyBA5IIJGTzJAlcEACiZxkhiyBAxJI5CQzZAkckEAiJ5khS+CABBI5yQxZAgckkMhJZsgSOCCBRE4yQ5bAAQkkcpIZsgQOSCCRk8yQJXBAAomcZIYsgQMSSFRJsgR6pZWoUCi2/wJF+rS1fmluPQAAAABJRU5ErkJggg=="/>
<br/>
<br>
SVG Image:<br>
<img style="cursor: pointer;" title="Click to edit image" onclick="DiagramEditor.editElement(this);"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIxMjFweCIgaGVpZ2h0PSI2MXB4IiB2aWV3Qm94PSItMC41IC0wLjUgMTIxIDYxIiBjb250ZW50PSImbHQ7bXhmaWxlIGhvc3Q9JnF1b3Q7d3d3LmRyYXcuaW8mcXVvdDsgbW9kaWZpZWQ9JnF1b3Q7MjAyMC0wMS0yN1QxNTozMjo0MC4xNzhaJnF1b3Q7IGFnZW50PSZxdW90O01vemlsbGEvNS4wIChNYWNpbnRvc2g7IEludGVsIE1hYyBPUyBYIDEwXzE0XzYpIEFwcGxlV2ViS2l0LzUzNy4zNiAoS0hUTUwsIGxpa2UgR2Vja28pIENocm9tZS83OS4wLjM5NDUuMTMwIFNhZmFyaS81MzcuMzYmcXVvdDsgZXRhZz0mcXVvdDtFWFBicVd5dUhldVQyY185OGQ2VSZxdW90OyB2ZXJzaW9uPSZxdW90OzEyLjUuOCZxdW90OyZndDsmbHQ7ZGlhZ3JhbSBpZD0mcXVvdDtlbVlSU0REUmtEUDJZZDNFWnkzciZxdW90OyBuYW1lPSZxdW90O1BhZ2UtMSZxdW90OyZndDtqWlBOYnFNd0VJQ2ZobU1SMkFseGp0MDA2VjU2YVZicWVUQURSbXR3Wkp3QSsvUnJyKzBTTnFwVUNZSG5tMS9QREFrOWROT3Job3Q0VXhYS2hHVFZsTkNYaEpDOFlOUitISms5MlJQbVFhUGJ5cU5zQWVmMkR3YlBTSzl0aFVOZ0hobWxwR2t2YThoVjN5TTNLd1phcTNGdFZpdTV6bnFCQmxjV0RwdzV5RWY2MFZaR2VNcElzZkNmMkRZaVpzNkx2ZGVVd0g4M1dsMzdrSzlYUFhwTkJ6Rk1xR0VRVUtseGhYQXlKOVdiVVB3SFNLTWExK0JrZXhUR3VMcy9KK1JrbjlwYXliYlVvT2RVNmNZU0dBYTBqbDdsdnVQaVRVNkV3aVlyOW94WGVWbXlUYjJuV2JtRGpMRU56K2tHQ2hlZ0pFVUcyNkltSmR1U2NzZHFsaU53U25lWUFhbTVOVmtLZXNmbUtrR255dFRKN3ZBRyttWVg0UDhpeDNGTU9RelFZd1VwRjNlMWVZZW5HTVhZS1BiKzlKalFnMWJLK0ZNM0hWQzZ0VnB2ek9rTGJSalpZT1k0eERncmpiMzVWb1E0eEJ2SWE0anhTN1NETTNFdmNGdUlnMGtmTW8yaU5YaStBSGZ5YUJ1VTBCL0NkTkpLdVQwK0ZoS0t2YUUyT04yaFVOZ3JxZzZObnExSjBNWU5tZGZpdUN4bkhwbTRXOHdpTUFncjFYd0dYdnBnRDZFVlVWeG04RTkzOTQvVDQxOD0mbHQ7L2RpYWdyYW0mZ3Q7Jmx0Oy9teGZpbGUmZ3Q7Ij48ZGVmcz48L2RlZnM+PGc+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEyMCIgaGVpZ2h0PSI2MCIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjMDAwMDAwIiBwb2ludGVyLWV2ZW50cz0iYWxsIi8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuNSAtMC41KSI+PHN3aXRjaD48Zm9yZWlnbk9iamVjdCBzdHlsZT0ib3ZlcmZsb3c6IHZpc2libGU7IHRleHQtYWxpZ246IGxlZnQ7IiBwb2ludGVyLWV2ZW50cz0ibm9uZSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgcmVxdWlyZWRGZWF0dXJlcz0iaHR0cDovL3d3dy53My5vcmcvVFIvU1ZHMTEvZmVhdHVyZSNFeHRlbnNpYmlsaXR5Ij48ZGl2IHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hodG1sIiBzdHlsZT0iZGlzcGxheTogZmxleDsgYWxpZ24taXRlbXM6IHVuc2FmZSBjZW50ZXI7IGp1c3RpZnktY29udGVudDogdW5zYWZlIGNlbnRlcjsgd2lkdGg6IDExOHB4OyBoZWlnaHQ6IDFweDsgcGFkZGluZy10b3A6IDMwcHg7IG1hcmdpbi1sZWZ0OiAycHg7Ij48ZGl2IHN0eWxlPSJib3gtc2l6aW5nOiBib3JkZXItYm94OyBmb250LXNpemU6IDA7IHRleHQtYWxpZ246IGNlbnRlcjsgIj48ZGl2IHN0eWxlPSJkaXNwbGF5OiBpbmxpbmUtYmxvY2s7IGZvbnQtc2l6ZTogMTJweDsgZm9udC1mYW1pbHk6IEhlbHZldGljYTsgY29sb3I6ICMwMDAwMDA7IGxpbmUtaGVpZ2h0OiAxLjI7IHBvaW50ZXItZXZlbnRzOiBhbGw7IHdoaXRlLXNwYWNlOiBub3JtYWw7IHdvcmQtd3JhcDogbm9ybWFsOyAiPlRoaXMgaXMgYSB0ZXN0LjwvZGl2PjwvZGl2PjwvZGl2PjwvZm9yZWlnbk9iamVjdD48dGV4dCB4PSI2MCIgeT0iMzQiIGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EiIGZvbnQtc2l6ZT0iMTJweCIgdGV4dC1hbmNob3I9Im1pZGRsZSI+VGhpcyBpcyBhIHRlc3QuPC90ZXh0Pjwvc3dpdGNoPjwvZz48L2c+PC9zdmc+">
<br/>
<br>
<div style="height:1600px">Vertical spacer for testing scrollbars.</div>
SVG Object (wrapper needed to implement click handler):<br>
<div style="cursor: pointer; display:inline-block;" title="Click to edit image" onclick="DiagramEditor.editElement(this.firstChild);"><object style="pointer-events:none;"
data="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIxMjFweCIgaGVpZ2h0PSI2MXB4IiB2aWV3Qm94PSItMC41IC0wLjUgMTIxIDYxIiBjb250ZW50PSImbHQ7bXhmaWxlIGhvc3Q9JnF1b3Q7d3d3LmRyYXcuaW8mcXVvdDsgbW9kaWZpZWQ9JnF1b3Q7MjAyMC0wMS0yN1QxNTozMjo0MC4xNzhaJnF1b3Q7IGFnZW50PSZxdW90O01vemlsbGEvNS4wIChNYWNpbnRvc2g7IEludGVsIE1hYyBPUyBYIDEwXzE0XzYpIEFwcGxlV2ViS2l0LzUzNy4zNiAoS0hUTUwsIGxpa2UgR2Vja28pIENocm9tZS83OS4wLjM5NDUuMTMwIFNhZmFyaS81MzcuMzYmcXVvdDsgZXRhZz0mcXVvdDtFWFBicVd5dUhldVQyY185OGQ2VSZxdW90OyB2ZXJzaW9uPSZxdW90OzEyLjUuOCZxdW90OyZndDsmbHQ7ZGlhZ3JhbSBpZD0mcXVvdDtlbVlSU0REUmtEUDJZZDNFWnkzciZxdW90OyBuYW1lPSZxdW90O1BhZ2UtMSZxdW90OyZndDtqWlBOYnFNd0VJQ2ZobU1SMkFseGp0MDA2VjU2YVZicWVUQURSbXR3Wkp3QSsvUnJyKzBTTnFwVUNZSG5tMS9QREFrOWROT3Job3Q0VXhYS2hHVFZsTkNYaEpDOFlOUitISms5MlJQbVFhUGJ5cU5zQWVmMkR3YlBTSzl0aFVOZ0hobWxwR2t2YThoVjN5TTNLd1phcTNGdFZpdTV6bnFCQmxjV0RwdzV5RWY2MFZaR2VNcElzZkNmMkRZaVpzNkx2ZGVVd0g4M1dsMzdrSzlYUFhwTkJ6Rk1xR0VRVUtseGhYQXlKOVdiVVB3SFNLTWExK0JrZXhUR3VMcy9KK1JrbjlwYXliYlVvT2RVNmNZU0dBYTBqbDdsdnVQaVRVNkV3aVlyOW94WGVWbXlUYjJuV2JtRGpMRU56K2tHQ2hlZ0pFVUcyNkltSmR1U2NzZHFsaU53U25lWUFhbTVOVmtLZXNmbUtrR255dFRKN3ZBRyttWVg0UDhpeDNGTU9RelFZd1VwRjNlMWVZZW5HTVhZS1BiKzlKalFnMWJLK0ZNM0hWQzZ0VnB2ek9rTGJSalpZT1k0eERncmpiMzVWb1E0eEJ2SWE0anhTN1NETTNFdmNGdUlnMGtmTW8yaU5YaStBSGZ5YUJ1VTBCL0NkTkpLdVQwK0ZoS0t2YUUyT04yaFVOZ3JxZzZObnExSjBNWU5tZGZpdUN4bkhwbTRXOHdpTUFncjFYd0dYdnBnRDZFVlVWeG04RTkzOTQvVDQxOD0mbHQ7L2RpYWdyYW0mZ3Q7Jmx0Oy9teGZpbGUmZ3Q7Ij48ZGVmcz48L2RlZnM+PGc+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEyMCIgaGVpZ2h0PSI2MCIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjMDAwMDAwIiBwb2ludGVyLWV2ZW50cz0iYWxsIi8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuNSAtMC41KSI+PHN3aXRjaD48Zm9yZWlnbk9iamVjdCBzdHlsZT0ib3ZlcmZsb3c6IHZpc2libGU7IHRleHQtYWxpZ246IGxlZnQ7IiBwb2ludGVyLWV2ZW50cz0ibm9uZSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgcmVxdWlyZWRGZWF0dXJlcz0iaHR0cDovL3d3dy53My5vcmcvVFIvU1ZHMTEvZmVhdHVyZSNFeHRlbnNpYmlsaXR5Ij48ZGl2IHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hodG1sIiBzdHlsZT0iZGlzcGxheTogZmxleDsgYWxpZ24taXRlbXM6IHVuc2FmZSBjZW50ZXI7IGp1c3RpZnktY29udGVudDogdW5zYWZlIGNlbnRlcjsgd2lkdGg6IDExOHB4OyBoZWlnaHQ6IDFweDsgcGFkZGluZy10b3A6IDMwcHg7IG1hcmdpbi1sZWZ0OiAycHg7Ij48ZGl2IHN0eWxlPSJib3gtc2l6aW5nOiBib3JkZXItYm94OyBmb250LXNpemU6IDA7IHRleHQtYWxpZ246IGNlbnRlcjsgIj48ZGl2IHN0eWxlPSJkaXNwbGF5OiBpbmxpbmUtYmxvY2s7IGZvbnQtc2l6ZTogMTJweDsgZm9udC1mYW1pbHk6IEhlbHZldGljYTsgY29sb3I6ICMwMDAwMDA7IGxpbmUtaGVpZ2h0OiAxLjI7IHBvaW50ZXItZXZlbnRzOiBhbGw7IHdoaXRlLXNwYWNlOiBub3JtYWw7IHdvcmQtd3JhcDogbm9ybWFsOyAiPlRoaXMgaXMgYSB0ZXN0LjwvZGl2PjwvZGl2PjwvZGl2PjwvZm9yZWlnbk9iamVjdD48dGV4dCB4PSI2MCIgeT0iMzQiIGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EiIGZvbnQtc2l6ZT0iMTJweCIgdGV4dC1hbmNob3I9Im1pZGRsZSI+VGhpcyBpcyBhIHRlc3QuPC90ZXh0Pjwvc3dpdGNoPjwvZz48L2c+PC9zdmc+">
</object>
</div>
<br/>
<br>
SVG DOM (wrapper needed to allow for replacing outerHTML on SVG element):<br>
<div style="cursor: pointer; display:inline-block;" title="Click to edit image" onclick="DiagramEditor.editElement(this.firstChild);"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="121px" height="61px" viewBox="-0.5 -0.5 121 61" content="<mxfile host="www.draw.io" modified="2020-01-27T15:32:40.178Z" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" etag="EXPbqWyuHeuT2c_98d6U" version="12.5.8"><diagram id="emYRSDDRkDP2Yd3EZy3r" name="Page-1">jZLBboQgEIafhmuzSmLca+1299KTTXqmMhVSBIO4ap++UoYqMU160ZlvhpmfGQituvlqWS9eDAdF8hOfCX0ieZ4VJV1/niyBnPMygNZKHtBpA7X8AjwZ6Sg5DMgCcsYoJ/sUNkZraFzCmLVmStM+jEq79qyFJMODumHqSN8kdyLQMi82fgPZitg5K84h8s6az9aaUWM/bTSESMdiGdQwCMbNtEP0QmhljXHB6uYKlB9rOrHnP6IoeXBLvETUakG7f1WIl7gzNWKNVyEHn+I/zG8BBvdw6DQJ6aDuWeP9aX0ShD4K16nVy1bzKATF3sE6mHcIhV3BdODssqZgNA5tSd1pW04WmdgtpkDG8D20v4W3OawGjiK62w5+Yrs3Ti/f</diagram></mxfile>"><defs></defs><g><rect x="0" y="0" width="120" height="60" fill="#ffffff" stroke="#000000" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 30px; margin-left: 2px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">This is a test.</div></div></div></foreignObject><text x="60" y="34" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">This is a test.</text></switch></g></g></svg>
</body>
</html>