Trying to use "useFontCache: false" in Mathjax-node - node.js

I try to use "useFontCache: false" in MathJax-node. Here is my example code:
#! /usr/bin/env node
var mjAPI = require("mathjax-node");
mjAPI.config({MathJax: {SVG: {font: "TeX"}}});
mjAPI.start();
mjAPI.typeset({
math: "\sin^2+\cos^2=1",
format: ("TeX"),
svg:true,
useFontCache: false,
ex: 6, width: 100,
}, function (data) {
if (!data.errors) {console.log(data.svg)}
});
and the generated output still uses < use> tags:
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="15.722ex" height="2.843ex" style="vertical-align: -0.505ex;" viewBox="0 -1006.6 6769.3 1223.9" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" aria-labelledby="MathJax-SVG-1-Title">
<title id="MathJax-SVG-1-Title">sin^2+cos^2=1</title>
<defs aria-hidden="true">
<path stroke-width="1" id="E1-MJMATHI-73" d="M131 289Q131 321 147 354T203 415T300 442Q362 442 390 415T419 355Q419 323 402 308T364 292Q351 292 340 300T328 326Q328 342 337 354T354 372T367 378Q368 378 368 379Q368 382 361 388T336 399T297 405Q249 405 227 379T204 326Q204 301 223 291T278 274T330 259Q396 230 396 163Q396 135 385 107T352 51T289 7T195 -10Q118 -10 86 19T53 87Q53 126 74 143T118 160Q133 160 146 151T160 120Q160 94 142 76T111 58Q109 57 108 57T107 55Q108 52 115 47T146 34T201 27Q237 27 263 38T301 66T318 97T323 122Q323 150 302 164T254 181T195 196T148 231Q131 256 131 289Z"></path>
<path stroke-width="1" id="E1-MJMATHI-69" d="M184 600Q184 624 203 642T247 661Q265 661 277 649T290 619Q290 596 270 577T226 557Q211 557 198 567T184 600ZM21 287Q21 295 30 318T54 369T98 420T158 442Q197 442 223 419T250 357Q250 340 236 301T196 196T154 83Q149 61 149 51Q149 26 166 26Q175 26 185 29T208 43T235 78T260 137Q263 149 265 151T282 153Q302 153 302 143Q302 135 293 112T268 61T223 11T161 -11Q129 -11 102 10T74 74Q74 91 79 106T122 220Q160 321 166 341T173 380Q173 404 156 404H154Q124 404 99 371T61 287Q60 286 59 284T58 281T56 279T53 278T49 278T41 278H27Q21 284 21 287Z"></path>
<path stroke-width="1" id="E1-MJMATHI-6E" d="M21 287Q22 293 24 303T36 341T56 388T89 425T135 442Q171 442 195 424T225 390T231 369Q231 367 232 367L243 378Q304 442 382 442Q436 442 469 415T503 336T465 179T427 52Q427 26 444 26Q450 26 453 27Q482 32 505 65T540 145Q542 153 560 153Q580 153 580 145Q580 144 576 130Q568 101 554 73T508 17T439 -10Q392 -10 371 17T350 73Q350 92 386 193T423 345Q423 404 379 404H374Q288 404 229 303L222 291L189 157Q156 26 151 16Q138 -11 108 -11Q95 -11 87 -5T76 7T74 17Q74 30 112 180T152 343Q153 348 153 366Q153 405 129 405Q91 405 66 305Q60 285 60 284Q58 278 41 278H27Q21 284 21 287Z"></path>
<path stroke-width="1" id="E1-MJMAIN-32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z"></path>
<path stroke-width="1" id="E1-MJMAIN-2B" d="M56 237T56 250T70 270H369V420L370 570Q380 583 389 583Q402 583 409 568V270H707Q722 262 722 250T707 230H409V-68Q401 -82 391 -82H389H387Q375 -82 369 -68V230H70Q56 237 56 250Z"></path>
<path stroke-width="1" id="E1-MJMATHI-63" d="M34 159Q34 268 120 355T306 442Q362 442 394 418T427 355Q427 326 408 306T360 285Q341 285 330 295T319 325T330 359T352 380T366 386H367Q367 388 361 392T340 400T306 404Q276 404 249 390Q228 381 206 359Q162 315 142 235T121 119Q121 73 147 50Q169 26 205 26H209Q321 26 394 111Q403 121 406 121Q410 121 419 112T429 98T420 83T391 55T346 25T282 0T202 -11Q127 -11 81 37T34 159Z"></path>
<path stroke-width="1" id="E1-MJMATHI-6F" d="M201 -11Q126 -11 80 38T34 156Q34 221 64 279T146 380Q222 441 301 441Q333 441 341 440Q354 437 367 433T402 417T438 387T464 338T476 268Q476 161 390 75T201 -11ZM121 120Q121 70 147 48T206 26Q250 26 289 58T351 142Q360 163 374 216T388 308Q388 352 370 375Q346 405 306 405Q243 405 195 347Q158 303 140 230T121 120Z"></path>
<path stroke-width="1" id="E1-MJMAIN-3D" d="M56 347Q56 360 70 367H707Q722 359 722 347Q722 336 708 328L390 327H72Q56 332 56 347ZM56 153Q56 168 72 173H708Q722 163 722 153Q722 140 707 133H70Q56 140 56 153Z"></path>
<path stroke-width="1" id="E1-MJMAIN-31" d="M213 578L200 573Q186 568 160 563T102 556H83V602H102Q149 604 189 617T245 641T273 663Q275 666 285 666Q294 666 302 660V361L303 61Q310 54 315 52T339 48T401 46H427V0H416Q395 3 257 3Q121 3 100 0H88V46H114Q136 46 152 46T177 47T193 50T201 52T207 57T213 61V578Z"></path>
</defs>
<g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)" aria-hidden="true">
<use xlink:href="#E1-MJMATHI-73" x="0" y="0"></use>
<use xlink:href="#E1-MJMATHI-69" x="469" y="0"></use>
<g transform="translate(815,0)">
<use xlink:href="#E1-MJMATHI-6E" x="0" y="0"></use>
<use transform="scale(0.707)" xlink:href="#E1-MJMAIN-32" x="849" y="583"></use>
</g>
<use xlink:href="#E1-MJMAIN-2B" x="2091" y="0"></use>
<use xlink:href="#E1-MJMATHI-63" x="3092" y="0"></use>
<use xlink:href="#E1-MJMATHI-6F" x="3525" y="0"></use>
<g transform="translate(4011,0)">
<use xlink:href="#E1-MJMATHI-73" x="0" y="0"></use>
<use transform="scale(0.707)" xlink:href="#E1-MJMAIN-32" x="663" y="583"></use>
</g>
<use xlink:href="#E1-MJMAIN-3D" x="5212" y="0"></use>
<use xlink:href="#E1-MJMAIN-31" x="6268" y="0"></use>
</g>
</svg>
I tried editing the MathJax SVG config, instead of the typeset, but still no change. Anybody know, what I am doing wrong?


This is a regression in the v2.0.0 (and 2.0.1) releases; v1.3.0 works as expected and a bug fix is ready for the next release.

Related

SVG curved area path (M C) - don't end at start (cut)

I have this SVG path:
<svg viewBox="0 0 500 500">
<path fill="red" d="
M 326 147
C 329 135 345 130 355 137
C 376 150 385 188 362 197
C 339 206 318 170 326 147
M 381 222
C 418 214 408 157 385 127
C 370 108 340 96 326 115
C 296 154 334 233 381 222
">
</path>
<g>
<path fill="blue" d="M 326 151 A 4 4 0 1 1 326.00399999933336 150.99999800000018 Z"></path>
<path fill="blue" d="M 355 141 A 4 4 0 1 1 355.00399999933336 140.99999800000018 Z"></path>
<path fill="blue" d="M 362 203.54315907595438 A 5.999822352380809 5.999822352380809 0 1 1 362.0059998213524 203.54315607604343 Z"></path>
<path fill="blue" d="M 326 119.76249999999999 A 4 4 0 1 1 326.00399999933336 119.76249800000015 Z"></path>
<path fill="blue" d="M 385 132 A 4 4 0 1 1 385.00399999933336 131.99999800000018 Z"></path>
<path fill="blue" d="M 381 228.81468927464363 A 5.9996841892833 5.9996841892833 0 1 1 381.0059996831893 228.81468627480177 Z"></path>
</g>
</svg>
Live demo: https://jsfiddle.net/BlackLabel/coa9hd7g/
I'm trying to get SVG that starts from A1 and A2 and ends on C1 and C2 like on the image below:
Any clues on how to achieve it? Thanks in advance!

You can delete the last bezier from every group, change the M command in the middle with a line L and close the path with a Z like so:
svg{width:90vh}
<svg viewBox="300 100 150 150">
<path fill="red" d="
M 326 147
C 329 135 345 130 355 137
C 376 150 385 188 362 197
L 381 222
C 418 214 408 157 385 127
C 370 108 340 96 326 115
z
">
</path>

Click polygon in Chrome using VBA/Selenium

I am trying to use obj.FindElementById("GraphicsLayer_layer").Click to click the polygon in the web page. However this command can only click the center point of the layer instead of the polygon.
Is there any other method I can use to click the polygon correctly?
Here is the screenshot showing the polygon in the web page:
Here is the codes for "GraphicsLayer_layer":
<svg overflow="hidden" width="730" height="500" id="mMapView_gc" style="touch-action: none; will-change: transform; overflow: visible; position: absolute; transform: translate(-113px, 143px);">
<g id="GraphicsLayer_layer" style="display: block;">
<g>
<path fill="rgb(0, 0, 255)" fill-opacity="0.2" stroke="rgb(0, 0, 255)" stroke-opacity="1" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" path="M 524,256 527,241 531,226 536,208 535,187 533,168 527,151 517,135 509,123 498,113 487,107 472,96 450,85 435,79 422,76 410,75 395,74 380,78 365,84 356,90 345,100 330,112 318,122 303,136 291,147 286,154 281,162 275,170 264,163 272,152 281,142 293,128 307,109 322,91 332,80 342,68 350,60 360,53 372,44 381,40 390,38 398,37 407,38 418,40 431,43 448,46 462,49 474,55 491,66 506,81 513,86 523,99 531,113 537,126 542,142 547,157 549,171 550,185 550,198 548,215 545,226 538,237 524,256 Z" d="M 524 256 527 241 531 226 536 208 535 187 533 168 527 151 517 135 509 123 498 113 487 107 472 96 450 85 435 79 422 76 410 75 395 74 380 78 365 84 356 90 345 100 330 112 318 122 303 136 291 147 286 154 281 162 275 170 264 163 272 152 281 142 293 128 307 109 322 91 332 80 342 68 350 60 360 53 372 44 381 40 390 38 398 37 407 38 418 40 431 43 448 46 462 49 474 55 491 66 506 81 513 86 523 99 531 113 537 126 542 142 547 157 549 171 550 185 550 198 548 215 545 226 538 237 524 256Z" stroke-dasharray="none" dojoGfxStrokeStyle="solid" fill-rule="evenodd">
</path>
</g>
</g>
<g id="DangRoadSignLayer_layer" opacity="0" data-geometry-type="point" style="display: block;">
<g>
</g>
</g>
<defs>
</defs>
<g id="mMapView_graphics_layer" style="display: block;">
<g>
</g>
</g>
</svg>

That's an svg element, you can locate it using the below xpath :-
//*[name()='svg' and #id='mMapView_gc']
or
//*[name()='svg' and #id='mMapView_gc']/*

How do I fill in holes in svg text?

I have a font that I'm using in SVG's that has hollow parts inside some letters:
How do I fill in just that inner part to get something like this?
I feel like it should be something with fill-rule + a clip or mask maybe?
<style>
#import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap');
</style>
<svg viewport="0 0 100 100">
<rect ry="8" rx="8" id="svg_2" height="100" width="100" y="0" x="0" stroke-width="5" fill="#bfbfbf"/><text font-family="Bungee Shade" text-anchor="middle" x="50" y="78" font-size="100" fill="Red">F</text>
</svg>

There is no simple way to do what you want.
The trouble is that the font glyph has been designed with a hole in it. There is no CSS property that you can apply to the text that will fill in the hole.
You would need to convert the text to paths, then either:
import the paths into a vector editor and draw the missing fill, or
examine the paths definition and extract the section that corresponds to the "hole"
I suppose the other thing you could try is overlay the "Bungee Inline" font so that it lines up with the holes. You will likely have to fiddle with the font size and letterspacing. But it might work...

With 0.1em of letter spacing and a left margin of 0.145em, the inline font seems to match up fairly well. But for best results, use the tool at djr.com/bungee#tester, where you can generate SVGs quite easily. There's also a JQuery tool that you can use to style text automatically in web pages. It's made by the font's developer, so it ought to work perfectly.
Here's an SVG I made using their tool. It just needed a bit of editing to fit it into a square and add a background with rounded corners:
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='6 39 140 140'>
<defs>
<path id='shade-notdef' d='M735 -159C749 -159 760 -155 766 -149L896 -41C905 -33 910 -22 910 -4V724C910 756 896 770 864 770H136C122 770 111 767 104 761L-25 652C-34 644 -39 633 -39 615V-113C-39 -145 -25 -159 7 -159ZM711 591V20H160V591Z' />
<path id='shade-46' d='M131 -119C145 -119 156 -115 162 -109L292 -1C301 7 306 18 306 36V114H341C355 114 366 118 372 124L502 232C511 240 516 251 516 269V389C516 421 502 435 471 435L583 528C592 536 597 547 597 565V684C597 716 583 730 551 730H105C91 730 80 727 73 721L-56 612C-65 604 -70 593 -70 575V-73C-70 -105 -56 -119 -24 -119Z' />
<path id='outline-notdef' d='M864 -30C882 -30 890 -22 890 -4V724C890 742 882 750 864 750H136C118 750 110 742 110 724V-4C110 -22 118 -30 136 -30ZM860 720V0H140V720Z' />
<path id='outline-46' d='M105 -10H260C292 -10 306 4 306 36V223H470C502 223 516 237 516 269V389C516 421 502 435 470 435H306V519H551C583 519 597 533 597 565V684C597 716 583 730 551 730H105C73 730 59 716 59 684V36C59 4 73 -10 105 -10Z' />
<path id='regular-notdef' d='M900 -4V724C900 749 889 760 864 760H136C111 760 100 749 100 724V-4C100 -29 111 -40 136 -40H864C889 -40 900 -29 900 -4ZM850 10H150V710H850Z' />
<path id='regular-46' d='M260 0C285 0 296 11 296 36V233H470C495 233 506 244 506 269V389C506 414 495 425 470 425H296V529H551C576 529 587 540 587 565V684C587 709 576 720 551 720H105C80 720 69 709 69 684V36C69 11 80 0 105 0Z' />
<path id='inline-notdef' d='M120 -20H880V740H120ZM870 -10H130V730H870Z' />
<path id='inline-46' d='M178 90H188V324H416V334H188V620H497V630H178Z' />
</defs>
<rect x='6' y='39' width='140' height='140' rx='10' ry='10' style='stroke:none;fill:#bfbfbf' />
<!-- Text: F (1 bytes) -->
<!-- F -->
<use transform='translate(37.76 150.08) scale(0.144 -0.144)' xlink:href='#shade-46' style='stroke:none;fill:#d74332' />
<!-- F -->
<use transform='translate(37.76 150.08) scale(0.144 -0.144)' xlink:href='#outline-46' style='stroke:none;fill:#d74332' />
<!-- F -->
<use transform='translate(37.76 150.08) scale(0.144 -0.144)' xlink:href='#regular-46' style='stroke:none;fill:#000000' />
<!-- F -->
<use transform='translate(37.76 150.08) scale(0.144 -0.144)' xlink:href='#inline-46' style='stroke:none;fill:#d74332' />
</svg>

How do I embed fonts that defined in "SVG format" in a SVG file after the death of <glyph>?

Here is the code. Exported from Adobe Animate CC.
Now according to the document. It's Deprecated.
I found some post like this but still couldn't figure out how do I make it working in the following way:
Keep the font detail in SVG format, not an external URI.
here is the code:
(I ignored the 4~9 and . in the code because StackOverflow won't let me insert too much code)
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="1280px" height="720px" viewBox="0 0 1280 720">
<defs>
<font horiz-adv-x="2048">
<!-- Font Name: Rockwell
Vendor ID: MONO
© 2014 The Monotype Corporation. All Rights Reserved.
URL for more Information: http://www.adobe.com/go/font_vendor_id?ID=MONO&Name=Rockwell&PSName=Rockwell-Regular&applanguage=en_US-->
<font-face font-family="Rockwell_Regular" units-per-em="2048" ascent="1391" descent="657"/>
<glyph unicode="0" horiz-adv-x="1202" d="
M 375 294
Q 299 436 299 752 299 1053 372 1204 444 1356 600 1356 745 1356 824 1220 903 1085 903 760 903 432 827 292 750 152 602 152 451 152 375 294 Z
M 987 1323
Q 852 1532 602 1532 442 1532 324 1441 205 1350 142 1174 78 999 78 752 78 395 213 185 348 -25 602 -25 762 -25 879 65 995 156 1059 331 1122 506 1122 752 1122 1114 987 1323 Z"/>
<glyph unicode="1" horiz-adv-x="1202" d="
M 733 184
L 733 1505 319 1505 319 1325 526 1325 526 184 319 184 319 0 928 0 928 184 733 184 Z"/>
<glyph unicode="2" horiz-adv-x="1202" d="
M 1003 1324
Q 952 1417 850 1474 748 1532 596 1532 473 1532 385 1495 297 1458 233 1380 127 1245 127 1004
L 127 946 326 946 326 997
Q 326 1180 384 1267 442 1354 590 1354 705 1354 771 1290 836 1227 836 1114 836 1034 795 971 754 909 651 834
L 502 721
Q 383 631 298 543 213 455 152 319 90 184 88 0
L 1053 0 1065 539 883 539 874 190 307 190
Q 324 274 370 342 416 410 481 466
L 664 612 760 684
Q 924 805 989 900 1053 995 1053 1122 1053 1231 1003 1324 Z"/>
</defs>
<g transform="matrix( 1, 0, 0, 1, 335,278.25) ">
<clipPath id="Mask_Mask_1">
<rect x="-2" y="-2" width="152.25" height="28" fill="#FFFFFF" stroke="none"/>
</clipPath>
<text clip-path="url(#Mask_Mask_1)" writing-mode="lr"><tspan x="0" y="16.3" baseline-shift="0%" kerning="auto" font-family="Rockwell_Regular" font-size="24" fill="#660000" xml:space="preserve">0123456789.</tspan></text>
</g>
</svg>

Is there an option to make MathJax code recoverable from rendered SVG?

What I am looking for is a way, either built in or a hack, that makes me able to go from
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="6.877ex" height="2.843ex" style="vertical-align: -0.838ex;" viewBox="0 -863.1 2960.9 1223.9" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg">
<defs>
<path stroke-width="1" id="E1-MJMAIN-28" d="M94 250Q94 319 104 381T127 488T164 576T202 643T244 695T277 729T302 750H315H319Q333 750 333 741Q333 738 316 720T275 667T226 581T184 443T167 250T184 58T225 -81T274 -167T316 -220T333 -241Q333 -250 318 -250H315H302L274 -226Q180 -141 137 -14T94 250Z"></path>
<path stroke-width="1" id="E1-MJMATHI-61" d="M33 157Q33 258 109 349T280 441Q331 441 370 392Q386 422 416 422Q429 422 439 414T449 394Q449 381 412 234T374 68Q374 43 381 35T402 26Q411 27 422 35Q443 55 463 131Q469 151 473 152Q475 153 483 153H487Q506 153 506 144Q506 138 501 117T481 63T449 13Q436 0 417 -8Q409 -10 393 -10Q359 -10 336 5T306 36L300 51Q299 52 296 50Q294 48 292 46Q233 -10 172 -10Q117 -10 75 30T33 157ZM351 328Q351 334 346 350T323 385T277 405Q242 405 210 374T160 293Q131 214 119 129Q119 126 119 118T118 106Q118 61 136 44T179 26Q217 26 254 59T298 110Q300 114 325 217T351 328Z"></path>
<path stroke-width="1" id="E1-MJMAIN-2B" d="M56 237T56 250T70 270H369V420L370 570Q380 583 389 583Q402 583 409 568V270H707Q722 262 722 250T707 230H409V-68Q401 -82 391 -82H389H387Q375 -82 369 -68V230H70Q56 237 56 250Z"></path>
<path stroke-width="1" id="E1-MJMATHI-62" d="M73 647Q73 657 77 670T89 683Q90 683 161 688T234 694Q246 694 246 685T212 542Q204 508 195 472T180 418L176 399Q176 396 182 402Q231 442 283 442Q345 442 383 396T422 280Q422 169 343 79T173 -11Q123 -11 82 27T40 150V159Q40 180 48 217T97 414Q147 611 147 623T109 637Q104 637 101 637H96Q86 637 83 637T76 640T73 647ZM336 325V331Q336 405 275 405Q258 405 240 397T207 376T181 352T163 330L157 322L136 236Q114 150 114 114Q114 66 138 42Q154 26 178 26Q211 26 245 58Q270 81 285 114T318 219Q336 291 336 325Z"></path>
<path stroke-width="1" id="E1-MJMAIN-29" d="M60 749L64 750Q69 750 74 750H86L114 726Q208 641 251 514T294 250Q294 182 284 119T261 12T224 -76T186 -143T145 -194T113 -227T90 -246Q87 -249 86 -250H74Q66 -250 63 -250T58 -247T55 -238Q56 -237 66 -225Q221 -64 221 250T66 725Q56 737 55 738Q55 746 60 749Z"></path>
</defs>
<g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)">
<use xlink:href="#E1-MJMAIN-28" x="0" y="0"></use>
<use xlink:href="#E1-MJMATHI-61" x="389" y="0"></use>
<use xlink:href="#E1-MJMAIN-2B" x="1141" y="0"></use>
<use xlink:href="#E1-MJMATHI-62" x="2141" y="0"></use>
<use xlink:href="#E1-MJMAIN-29" x="2571" y="0"></use>
</g>
</svg>
to
\left(a+b\right)
The SVG is self generated so I would like have a map that that identifies with each SVG symbol (or group of symbols) a character in the string.
I thought of something like class annotation.

Your question indicates that you are looking to reconstruct TeX input from MathJax output, in which case the answer is "no".
On the one hand, MathJax converts input into (essentially) MathML in its internal data structure and renders that; cf. http://docs.mathjax.org/en/latest/advanced/model.html#the-components-of-mathjax. While you can reconstruct that MathML in many cases, you can't reconstruct the original TeX from it (for SVG, the default configuration makes it even harder).
On the other hand, even TeX-like rendering tools (like MathJax's predecessor jsMath) will have to resolve macros down to a TeX-like internal format (TeX lists basically) in which case you could only regenerate some very basic layout instructions (because real TeX/LaTeX is a programming language for print layout).
Of course, MathJax provides APIs to retrieve the original input from a given element and, in fact, stores it in the DOM in a custom script tag right after the SVG; so if that's what you're after it's much simpler.
Finally, if all you want to know is what Unicode point a certain SVG path represents, then the href of the <use> elements is what you're after, e.g., #E1-MJMAIN-28 matches u+0028.

Resources