Two.js: Questions on positioning and transforming SVGs

Created on 11 Aug 2019 · 8Comments · Source: jonobr1/two.js

I have a few questions regarding this page:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="./node_modules/two.js/build/two.js"></script>
  </head>
  <body>
    <svg
    id="text" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.955ex" height="2.05ex" viewBox="0 -763.5 7300 882.7" role="img" focusable="false" style="vertical-align: -0.277ex;" aria-hidden="true">
    <g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)">
        <path stroke-width="1" d="M36 443Q37 448 46 558T55 671V677H666V671Q667 666 676 556T685 443V437H645V443Q645 445 642 478T631 544T610 593Q593 614 555 625Q534 630 478 630H451H443Q417 630 414 618Q413 616 413 339V63Q420 53 439 50T528 46H558V0H545L361 3Q186 1 177 0H164V46H194Q264 46 283 49T309 63V339V550Q309 620 304 625T271 630H244H224Q154 630 119 601Q101 585 93 554T81 486T76 443V437H36V443Z"></path>
        <path stroke-width="1" d="M41 46H55Q94 46 102 60V68Q102 77 102 91T102 124T102 167T103 217T103 272T103 329Q103 366 103 407T103 482T102 542T102 586T102 603Q99 622 88 628T43 637H25V660Q25 683 27 683L37 684Q47 685 66 686T103 688Q120 689 140 690T170 693T181 694H184V367Q244 442 328 442Q451 442 463 329Q464 322 464 190V104Q464 66 466 59T477 49Q498 46 526 46H542V0H534L510 1Q487 2 460 2T422 3Q319 3 310 0H302V46H318Q379 46 379 62Q380 64 380 200Q379 335 378 343Q372 371 358 385T334 402T308 404Q263 404 229 370Q202 343 195 315T187 232V168V108Q187 78 188 68T191 55T200 49Q221 46 249 46H265V0H257L234 1Q210 2 183 2T145 3Q42 3 33 0H25V46H41Z" transform="translate(722,0)"></path>
        <path stroke-width="1" d="M69 609Q69 637 87 653T131 669Q154 667 171 652T188 609Q188 579 171 564T129 549Q104 549 87 564T69 609ZM247 0Q232 3 143 3Q132 3 106 3T56 1L34 0H26V46H42Q70 46 91 49Q100 53 102 60T104 102V205V293Q104 345 102 359T88 378Q74 385 41 385H30V408Q30 431 32 431L42 432Q52 433 70 434T106 436Q123 437 142 438T171 441T182 442H185V62Q190 52 197 50T232 46H255V0H247Z" transform="translate(1279,0)"></path>
        <path stroke-width="1" d="M295 316Q295 356 268 385T190 414Q154 414 128 401Q98 382 98 349Q97 344 98 336T114 312T157 287Q175 282 201 278T245 269T277 256Q294 248 310 236T342 195T359 133Q359 71 321 31T198 -10H190Q138 -10 94 26L86 19L77 10Q71 4 65 -1L54 -11H46H42Q39 -11 33 -5V74V132Q33 153 35 157T45 162H54Q66 162 70 158T75 146T82 119T101 77Q136 26 198 26Q295 26 295 104Q295 133 277 151Q257 175 194 187T111 210Q75 227 54 256T33 318Q33 357 50 384T93 424T143 442T187 447H198Q238 447 268 432L283 424L292 431Q302 440 314 448H322H326Q329 448 335 442V310L329 304H301Q295 310 295 316Z" transform="translate(1557,0)"></path>
        <path stroke-width="1" d="M69 609Q69 637 87 653T131 669Q154 667 171 652T188 609Q188 579 171 564T129 549Q104 549 87 564T69 609ZM247 0Q232 3 143 3Q132 3 106 3T56 1L34 0H26V46H42Q70 46 91 49Q100 53 102 60T104 102V205V293Q104 345 102 359T88 378Q74 385 41 385H30V408Q30 431 32 431L42 432Q52 433 70 434T106 436Q123 437 142 438T171 441T182 442H185V62Q190 52 197 50T232 46H255V0H247Z" transform="translate(2202,0)"></path>
        <path stroke-width="1" d="M295 316Q295 356 268 385T190 414Q154 414 128 401Q98 382 98 349Q97 344 98 336T114 312T157 287Q175 282 201 278T245 269T277 256Q294 248 310 236T342 195T359 133Q359 71 321 31T198 -10H190Q138 -10 94 26L86 19L77 10Q71 4 65 -1L54 -11H46H42Q39 -11 33 -5V74V132Q33 153 35 157T45 162H54Q66 162 70 158T75 146T82 119T101 77Q136 26 198 26Q295 26 295 104Q295 133 277 151Q257 175 194 187T111 210Q75 227 54 256T33 318Q33 357 50 384T93 424T143 442T187 447H198Q238 447 268 432L283 424L292 431Q302 440 314 448H322H326Q329 448 335 442V310L329 304H301Q295 310 295 316Z" transform="translate(2480,0)"></path>
        <path stroke-width="1" d="M295 316Q295 356 268 385T190 414Q154 414 128 401Q98 382 98 349Q97 344 98 336T114 312T157 287Q175 282 201 278T245 269T277 256Q294 248 310 236T342 195T359 133Q359 71 321 31T198 -10H190Q138 -10 94 26L86 19L77 10Q71 4 65 -1L54 -11H46H42Q39 -11 33 -5V74V132Q33 153 35 157T45 162H54Q66 162 70 158T75 146T82 119T101 77Q136 26 198 26Q295 26 295 104Q295 133 277 151Q257 175 194 187T111 210Q75 227 54 256T33 318Q33 357 50 384T93 424T143 442T187 447H198Q238 447 268 432L283 424L292 431Q302 440 314 448H322H326Q329 448 335 442V310L329 304H301Q295 310 295 316Z" transform="translate(3125,0)"></path>
        <path stroke-width="1" d="M28 214Q28 309 93 378T250 448Q340 448 405 380T471 215Q471 120 407 55T250 -10Q153 -10 91 57T28 214ZM250 30Q372 30 372 193V225V250Q372 272 371 288T364 326T348 362T317 390T268 410Q263 411 252 411Q222 411 195 399Q152 377 139 338T126 246V226Q126 130 145 91Q177 30 250 30Z" transform="translate(3519,0)"></path>
        <path stroke-width="1" d="M41 46H55Q94 46 102 60V68Q102 77 102 91T102 122T103 161T103 203Q103 234 103 269T102 328V351Q99 370 88 376T43 385H25V408Q25 431 27 431L37 432Q47 433 65 434T102 436Q119 437 138 438T167 441T178 442H181V402Q181 364 182 364T187 369T199 384T218 402T247 421T285 437Q305 442 336 442Q351 442 364 440T387 434T406 426T421 417T432 406T441 395T448 384T452 374T455 366L457 361L460 365Q463 369 466 373T475 384T488 397T503 410T523 422T546 432T572 439T603 442Q729 442 740 329Q741 322 741 190V104Q741 66 743 59T754 49Q775 46 803 46H819V0H811L788 1Q764 2 737 2T699 3Q596 3 587 0H579V46H595Q656 46 656 62Q657 64 657 200Q656 335 655 343Q649 371 635 385T611 402T585 404Q540 404 506 370Q479 343 472 315T464 232V168V108Q464 78 465 68T468 55T477 49Q498 46 526 46H542V0H534L510 1Q487 2 460 2T422 3Q319 3 310 0H302V46H318Q379 46 379 62Q380 64 380 200Q379 335 378 343Q372 371 358 385T334 402T308 404Q263 404 229 370Q202 343 195 315T187 232V168V108Q187 78 188 68T191 55T200 49Q221 46 249 46H265V0H257L234 1Q210 2 183 2T145 3Q42 3 33 0H25V46H41Z" transform="translate(4020,0)"></path>
        <path stroke-width="1" d="M28 218Q28 273 48 318T98 391T163 433T229 448Q282 448 320 430T378 380T406 316T415 245Q415 238 408 231H126V216Q126 68 226 36Q246 30 270 30Q312 30 342 62Q359 79 369 104L379 128Q382 131 395 131H398Q415 131 415 121Q415 117 412 108Q393 53 349 21T250 -11Q155 -11 92 58T28 218ZM333 275Q322 403 238 411H236Q228 411 220 410T195 402T166 381T143 340T127 274V267H333V275Z" transform="translate(4853,0)"></path>
        <path stroke-width="1" d="M27 422Q80 426 109 478T141 600V615H181V431H316V385H181V241Q182 116 182 100T189 68Q203 29 238 29Q282 29 292 100Q293 108 293 146V181H333V146V134Q333 57 291 17Q264 -10 221 -10Q187 -10 162 2T124 33T105 68T98 100Q97 107 97 248V385H18V422H27Z" transform="translate(5548,0)"></path>
        <path stroke-width="1" d="M28 218Q28 273 48 318T98 391T163 433T229 448Q282 448 320 430T378 380T406 316T415 245Q415 238 408 231H126V216Q126 68 226 36Q246 30 270 30Q312 30 342 62Q359 79 369 104L379 128Q382 131 395 131H398Q415 131 415 121Q415 117 412 108Q393 53 349 21T250 -11Q155 -11 92 58T28 218ZM333 275Q322 403 238 411H236Q228 411 220 410T195 402T166 381T143 340T127 274V267H333V275Z" transform="translate(5937,0)"></path>
        <path stroke-width="1" d="M201 0Q189 3 102 3Q26 3 17 0H11V46H25Q48 47 67 52T96 61T121 78T139 96T160 122T180 150L226 210L168 288Q159 301 149 315T133 336T122 351T113 363T107 370T100 376T94 379T88 381T80 383Q74 383 44 385H16V431H23Q59 429 126 429Q219 429 229 431H237V385Q201 381 201 369Q201 367 211 353T239 315T268 274L272 270L297 304Q329 345 329 358Q329 364 327 369T322 376T317 380T310 384L307 385H302V431H309Q324 428 408 428Q487 428 493 431H499V385H492Q443 385 411 368Q394 360 377 341T312 257L296 236L358 151Q424 61 429 57T446 50Q464 46 499 46H516V0H510H502Q494 1 482 1T457 2T432 2T414 3Q403 3 377 3T327 1L304 0H295V46H298Q309 46 320 51T331 63Q331 65 291 120L250 175Q249 174 219 133T185 88Q181 83 181 74Q181 63 188 55T206 46Q208 46 208 23V0H201Z" transform="translate(6382,0)"></path>
        <path stroke-width="1" d="M27 422Q80 426 109 478T141 600V615H181V431H316V385H181V241Q182 116 182 100T189 68Q203 29 238 29Q282 29 292 100Q293 108 293 146V181H333V146V134Q333 57 291 17Q264 -10 221 -10Q187 -10 162 2T124 33T105 68T98 100Q97 107 97 248V385H18V422H27Z" transform="translate(6910,0)"></path>
    </g>
    </svg>
    <div id="two"/>
    <script>
        let elem = document.getElementById('two');
        let two = new Two({
          width: 600,
          height: 300
        }).appendTo(elem);

        let shape = two.interpret(document.getElementById('text'));
        console.log(shape.getBoundingClientRect());
        console.log(shape.translation);
        // shape.translation.add(
        //     -shape.getBoundingClientRect().left,
        //     -shape.getBoundingClientRect().top,
        // );
        two.update();
    </script>
  </body>
</html>

The things that seem odd to me are:

When the script is run as pasted, the SVG is rendered offscreen and with a nonzero translation
When the translation is uncommented so that the SVG appears onscreen it is flipped across the vertical axis

Regarding the first point, is this unexpected behavior or a property of the SVG? If it is a property of the SVG, is there a way to modify it so that it is centered on the top left corner with zero translation, as the shapes created with Two.makeRectangle and Two.makeCircle are?

I have the same questions about the second point as the first, is it unexpected and how can I fix it?

While looking for ways to flip and more generally apply transformations to the SVG, I realized that most of the more powerful ones require operating on the _matrix property directly (example). However this isn't documented (https://github.com/jonobr1/two.js/issues/295#issuecomment-520190902) and the prefixed underscore makes it seem as if this isn't the intended way to do it. Is there a better way, or is this correct? If it is correct, should the underscore be removed?

question

Source

eulertour

All 8 comments

Related to the question on applying transformations with the _matrix property, is there an easy way to keep the stroke width constant during an animation such as the rotation linked above, so that when the circle is rotated 90 degrees it has the appearance of a straight line rather than disappearing?

eulertour on 11 Aug 2019

Thanks for the questions @eulertour, these are really hammering out small issues with the SVG interpreter 👍. I'm going to answer your questions in a series of responses because I'm going through and verifying that things are working a) the way they're intended and b) if something is missing we can address it.

For running the script you've attached I've updated Two.js dev branch again to have fixes for you. The interpret function now better handles the viewBox property which you're using to define a specific space and Two.js attempts to mimic the viewBox you've defined for your SVG.

With the latest build this is how the script runs with the shape.translation code commented out:
Screen Shot 2019-08-11 at 12 14 18 PM
The small text is the original SVG and the outlined box is your Two.js scene.

jonobr1 on 11 Aug 2019

👍1

Second, generally speaking Two.js _attempts_ to interpret an object as if it were created in Two.js by centering its vertices so you can use translation, rotation, scale like you do in Two.js. However, for many instances this is quite difficult to infer. If in the case this doesn't happen you can go through the interpreted SVG and call center() in order to anchor specific elements in the way you'd like. For instance, with the latest dev build you can use the center method to enforce behavior on specific elements like so:
````javascript
var shape = two.interpret(document.getElementById('text'));
var group = shape.children[0];
var t = group.children[0];

// Get the local space bounding rectangle
var rect = t.getBoundingClientRect(true);
t.center(); // Center vertices around a 0, 0 origin
// Move the t back to its original position
t.translation.set(rect.left + rect.width / 2, rect.top + rect.height / 2);

rect = group.getBoundingClientRect(true);
group.center();
group.translation.set(rect.width / 2 + rect.left, rect.height / 2 + rect.top);

two.bind('update', function() {
group.rotation -= 0.01;
t.rotation += 0.01;
});

two.play();
````

Which spins the text and the "T" in opposite directions.

Screen Shot 2019-08-11 at 12 47 28 PM

jonobr1 on 11 Aug 2019

Finally, for the matrix I've exposed Two.Path.matrix in the latest build so you should feel free to access it like you would any other property. The reason I initially kept it "private" was because the underlying Two.Shape class calls a number of methods to apply the translation, rotation, and scale and didn't want to confuse people because the behavior is not bi-directional.

Like the example you showed you can construct your own matrix compositions by simply calling matrix.manual = true which means you'd like to control the matrix directly and Two.js won't listen to the translation, rotation, or scale properties on the object.

Hope this helps! Don't hesitate to ask any further questions or continue to keep posting issues.

jonobr1 on 11 Aug 2019

Thanks for responding so quickly and giving such clear solutions.
If you'll allow a follow-up, do you know of an easy way to apply a matrix to an object without affecting the stroke width? I ask because in the example that I linked earlier, the circle disappears when rotated 90 degrees.

eulertour on 11 Aug 2019

Ah, right. That I'm not sure how to answer off the top of my head. I haven't used the skew parameters much. If you can't figure out a way with linewidth you might just have to make a single line and slip it visible when it's at 90 degrees

jonobr1 on 12 Aug 2019

👍1

when there has text label,twojs can not interpret label ,WHY!