Two.js: SVG Interpretation Doesn't Support <use /> or <defs /> Tags
The following page throws an error: <g> attribute transform: Expected number, "matrix(NaN NaN NaN NaN …"
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.6.0/two.js"></script>
</head>
<body>
<svg id="text" height='9.34643pt' version='1.1' viewBox='-0.239051 -0.243581 99.4727 9.34643' width='99.4727pt' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<path d='M7.80672 -8.1056H0.633624L0.418431 -5.4396H0.681445C0.848817 -7.32852 0.956413 -7.7589 2.84533 -7.7589C3.06052 -7.7589 3.39527 -7.7589 3.49091 -7.73499C3.73001 -7.69913 3.74197 -7.55567 3.74197 -7.2807V-0.920548C3.74197 -0.514072 3.74197 -0.3467 2.57036 -0.3467H2.13998V0C2.52254 -0.0239103 3.75392 -0.0239103 4.22017 -0.0239103S5.92976 -0.0239103 6.31233 0V-0.3467H5.88194C4.71034 -0.3467 4.71034 -0.514072 4.71034 -0.920548V-7.2807C4.71034 -7.57958 4.73425 -7.68717 4.92553 -7.73499C5.02117 -7.7589 5.36787 -7.7589 5.59502 -7.7589C7.48394 -7.7589 7.59153 -7.32852 7.7589 -5.4396H8.02192L7.80672 -8.1056Z' id='g0-84'/>
<path d='M4.57883 -2.7736C4.84184 -2.7736 4.86575 -2.7736 4.86575 -3.00075C4.86575 -4.20822 4.22017 -5.332 2.7736 -5.332C1.41071 -5.332 0.358655 -4.10062 0.358655 -2.61818C0.358655 -1.0401 1.57808 0.119552 2.90511 0.119552C4.32777 0.119552 4.86575 -1.17161 4.86575 -1.42267C4.86575 -1.4944 4.80598 -1.54222 4.73425 -1.54222C4.63861 -1.54222 4.61469 -1.48244 4.59078 -1.42267C4.27995 -0.418431 3.47895 -0.143462 2.97684 -0.143462S1.26725 -0.478207 1.26725 -2.54645V-2.7736H4.57883ZM1.2792 -3.00075C1.37484 -4.87771 2.4269 -5.0929 2.76164 -5.0929C4.04085 -5.0929 4.11258 -3.40722 4.12453 -3.00075H1.2792Z' id='g0-101'/>
<path d='M5.32005 -2.90511C5.32005 -4.01694 5.32005 -4.35168 5.04508 -4.73425C4.69838 -5.2005 4.13649 -5.27223 3.73001 -5.27223C2.70187 -5.27223 2.22366 -4.49514 2.05629 -4.12453H2.04433V-8.29689L0.382565 -8.16538V-7.81868C1.19552 -7.81868 1.29116 -7.73499 1.29116 -7.14919V-0.884682C1.29116 -0.3467 1.15965 -0.3467 0.382565 -0.3467V0C0.6934 -0.0239103 1.33898 -0.0239103 1.67372 -0.0239103C2.02042 -0.0239103 2.666 -0.0239103 2.97684 0V-0.3467C2.21171 -0.3467 2.06824 -0.3467 2.06824 -0.884682V-3.10834C2.06824 -4.36364 2.89315 -5.03313 3.63437 -5.03313S4.54296 -4.42341 4.54296 -3.69415V-0.884682C4.54296 -0.3467 4.41146 -0.3467 3.63437 -0.3467V0C3.94521 -0.0239103 4.59078 -0.0239103 4.92553 -0.0239103C5.27223 -0.0239103 5.91781 -0.0239103 6.22864 0V-0.3467C5.63088 -0.3467 5.332 -0.3467 5.32005 -0.705355V-2.90511Z' id='g0-104'/>
<path d='M2.0802 -7.36438C2.0802 -7.67522 1.82914 -7.95019 1.4944 -7.95019C1.18356 -7.95019 0.920548 -7.69913 0.920548 -7.37634C0.920548 -7.01768 1.20747 -6.79054 1.4944 -6.79054C1.86501 -6.79054 2.0802 -7.10137 2.0802 -7.36438ZM0.430386 -5.14072V-4.79402C1.19552 -4.79402 1.30311 -4.72229 1.30311 -4.13649V-0.884682C1.30311 -0.3467 1.17161 -0.3467 0.394521 -0.3467V0C0.729265 -0.0239103 1.30311 -0.0239103 1.64981 -0.0239103C1.78132 -0.0239103 2.47472 -0.0239103 2.8812 0V-0.3467C2.10411 -0.3467 2.05629 -0.406476 2.05629 -0.872727V-5.27223L0.430386 -5.14072Z' id='g0-105'/>
<path d='M8.57186 -2.90511C8.57186 -4.01694 8.57186 -4.35168 8.29689 -4.73425C7.95019 -5.2005 7.38829 -5.27223 6.98182 -5.27223C5.98954 -5.27223 5.48742 -4.55492 5.29614 -4.08867C5.12877 -5.00922 4.48319 -5.27223 3.73001 -5.27223C2.57036 -5.27223 2.11606 -4.27995 2.02042 -4.04085H2.00847V-5.27223L0.382565 -5.14072V-4.79402C1.19552 -4.79402 1.29116 -4.71034 1.29116 -4.12453V-0.884682C1.29116 -0.3467 1.15965 -0.3467 0.382565 -0.3467V0C0.6934 -0.0239103 1.33898 -0.0239103 1.67372 -0.0239103C2.02042 -0.0239103 2.666 -0.0239103 2.97684 0V-0.3467C2.21171 -0.3467 2.06824 -0.3467 2.06824 -0.884682V-3.10834C2.06824 -4.36364 2.89315 -5.03313 3.63437 -5.03313S4.54296 -4.42341 4.54296 -3.69415V-0.884682C4.54296 -0.3467 4.41146 -0.3467 3.63437 -0.3467V0C3.94521 -0.0239103 4.59078 -0.0239103 4.92553 -0.0239103C5.27223 -0.0239103 5.91781 -0.0239103 6.22864 0V-0.3467C5.46351 -0.3467 5.32005 -0.3467 5.32005 -0.884682V-3.10834C5.32005 -4.36364 6.14496 -5.03313 6.88618 -5.03313S7.79477 -4.42341 7.79477 -3.69415V-0.884682C7.79477 -0.3467 7.66326 -0.3467 6.88618 -0.3467V0C7.19701 -0.0239103 7.84259 -0.0239103 8.17733 -0.0239103C8.52403 -0.0239103 9.16961 -0.0239103 9.48045 0V-0.3467C8.88269 -0.3467 8.58381 -0.3467 8.57186 -0.705355V-2.90511Z' id='g0-109'/>
<path d='M5.48742 -2.55841C5.48742 -4.10062 4.31582 -5.332 2.92902 -5.332C1.4944 -5.332 0.358655 -4.06476 0.358655 -2.55841C0.358655 -1.02814 1.55417 0.119552 2.91706 0.119552C4.32777 0.119552 5.48742 -1.05205 5.48742 -2.55841ZM2.92902 -0.143462C2.48667 -0.143462 1.94869 -0.334745 1.60199 -0.920548C1.2792 -1.45853 1.26725 -2.16389 1.26725 -2.666C1.26725 -3.1203 1.26725 -3.84956 1.63786 -4.38755C1.9726 -4.90162 2.49863 -5.0929 2.91706 -5.0929C3.38331 -5.0929 3.88543 -4.87771 4.20822 -4.41146C4.57883 -3.86152 4.57883 -3.10834 4.57883 -2.666C4.57883 -2.24757 4.57883 -1.50635 4.268 -0.944458C3.93325 -0.37061 3.38331 -0.143462 2.92902 -0.143462Z' id='g0-111'/>
<path d='M3.9213 -5.05704C3.9213 -5.27223 3.9213 -5.332 3.80174 -5.332C3.7061 -5.332 3.47895 -5.06899 3.39527 -4.96139C3.02466 -5.26027 2.65405 -5.332 2.27148 -5.332C0.824907 -5.332 0.394521 -4.54296 0.394521 -3.88543C0.394521 -3.75392 0.394521 -3.33549 0.848817 -2.91706C1.23138 -2.58232 1.63786 -2.49863 2.1878 -2.39103C2.84533 -2.25953 3.00075 -2.22366 3.29963 -1.98456C3.51482 -1.80523 3.67024 -1.54222 3.67024 -1.20747C3.67024 -0.6934 3.37136 -0.119552 2.3193 -0.119552C1.53026 -0.119552 0.956413 -0.573848 0.6934 -1.76936C0.645579 -1.98456 0.645579 -1.99651 0.633624 -2.00847C0.609714 -2.05629 0.561893 -2.05629 0.526027 -2.05629C0.394521 -2.05629 0.394521 -1.99651 0.394521 -1.78132V-0.155417C0.394521 0.0597758 0.394521 0.119552 0.514072 0.119552C0.573848 0.119552 0.585803 0.107597 0.789041 -0.143462C0.848817 -0.227148 0.848817 -0.251059 1.02814 -0.442341C1.48244 0.119552 2.12802 0.119552 2.33126 0.119552C3.58655 0.119552 4.20822 -0.573848 4.20822 -1.51831C4.20822 -2.16389 3.8137 -2.54645 3.7061 -2.65405C3.27572 -3.02466 2.95293 -3.09639 2.16389 -3.23985C1.80523 -3.31158 0.932503 -3.47895 0.932503 -4.19626C0.932503 -4.56687 1.18356 -5.11681 2.25953 -5.11681C3.56264 -5.11681 3.63437 -4.00498 3.65828 -3.63437C3.67024 -3.53873 3.75392 -3.53873 3.78979 -3.53873C3.9213 -3.53873 3.9213 -3.59851 3.9213 -3.8137V-5.05704Z' id='g0-115'/>
<path d='M2.00847 -4.80598H3.69415V-5.15268H2.00847V-7.35243H1.74545C1.7335 -6.22864 1.30311 -5.08095 0.215193 -5.04508V-4.80598H1.23138V-1.48244C1.23138 -0.155417 2.11606 0.119552 2.74969 0.119552C3.50286 0.119552 3.89738 -0.621669 3.89738 -1.48244V-2.16389H3.63437V-1.50635C3.63437 -0.645579 3.28767 -0.143462 2.82142 -0.143462C2.00847 -0.143462 2.00847 -1.25529 2.00847 -1.45853V-4.80598Z' id='g0-116'/>
<path d='M3.34745 -2.82142C3.69415 -3.27572 4.19626 -3.9213 4.42341 -4.17235C4.91357 -4.72229 5.47547 -4.80598 5.85803 -4.80598V-5.15268C5.34396 -5.12877 5.32005 -5.12877 4.8538 -5.12877C4.3995 -5.12877 4.37559 -5.12877 3.77783 -5.15268V-4.80598C3.93325 -4.78207 4.12453 -4.71034 4.12453 -4.43537C4.12453 -4.23213 4.01694 -4.10062 3.94521 -4.00498L3.18007 -3.03661L2.24757 -4.268C2.21171 -4.31582 2.13998 -4.42341 2.13998 -4.5071C2.13998 -4.57883 2.19975 -4.79402 2.55841 -4.80598V-5.15268C2.25953 -5.12877 1.64981 -5.12877 1.32702 -5.12877C0.932503 -5.12877 0.908593 -5.12877 0.179328 -5.15268V-4.80598C0.789041 -4.80598 1.01619 -4.78207 1.26725 -4.45928L2.666 -2.63014C2.68991 -2.60623 2.73773 -2.5345 2.73773 -2.49863S1.80523 -1.29116 1.68568 -1.13574C1.15965 -0.490162 0.633624 -0.358655 0.119552 -0.3467V0C0.573848 -0.0239103 0.597758 -0.0239103 1.11183 -0.0239103C1.56613 -0.0239103 1.59004 -0.0239103 2.1878 0V-0.3467C1.90087 -0.382565 1.85305 -0.561893 1.85305 -0.729265C1.85305 -0.920548 1.93674 -1.01619 2.05629 -1.17161C2.23562 -1.42267 2.63014 -1.91283 2.91706 -2.28344L3.89738 -1.00423C4.10062 -0.74122 4.10062 -0.71731 4.10062 -0.645579C4.10062 -0.549938 4.00498 -0.358655 3.68219 -0.3467V0C3.99303 -0.0239103 4.57883 -0.0239103 4.91357 -0.0239103C5.30809 -0.0239103 5.332 -0.0239103 6.04932 0V-0.3467C5.41569 -0.3467 5.2005 -0.37061 4.91357 -0.753176L3.34745 -2.82142Z' id='g0-120'/>
</defs>
<g id='page1' transform='matrix(1.13 0 0 1.13 -63.986 -65.1985)'>
<use x='56.4133' xlink:href='#g0-84' y='65.7534'/>
<use x='64.836' xlink:href='#g0-104' y='65.7534'/>
<use x='71.315' xlink:href='#g0-105' y='65.7534'/>
<use x='74.5545' xlink:href='#g0-115' y='65.7534'/>
<use x='83.0566' xlink:href='#g0-105' y='65.7534'/>
<use x='86.2962' xlink:href='#g0-115' y='65.7534'/>
<use x='94.7983' xlink:href='#g0-115' y='65.7534'/>
<use x='99.3984' xlink:href='#g0-111' y='65.7534'/>
<use x='105.229' xlink:href='#g0-109' y='65.7534'/>
<use x='114.948' xlink:href='#g0-101' y='65.7534'/>
<use x='124.033' xlink:href='#g0-116' y='65.7534'/>
<use x='128.569' xlink:href='#g0-101' y='65.7534'/>
<use x='133.752' xlink:href='#g0-120' y='65.7534'/>
<use x='139.907' xlink:href='#g0-116' y='65.7534'/>
</g>
</svg>
<div id="two"/>
<script>
var elem = document.getElementById('two');
var two = new Two({
width: 285,
height: 200
}).appendTo(elem);
var mySvg = document.getElementById('text');
shape = two.interpret(mySvg);
shape.center();
two.update();
</script>
</body>
</html>
The svg is the output of \textrm{This is some text} at https://www.codecogs.com/latex/eqneditor.php.
eulertour
>All comments
Thanks for posting @eulertour, unfortunately Two.js doesn't import <use /> or <defs /> tags... But, there's no reason that it shouldn't be able to. I can roadmap this feature. In the meantime I recommend using the v0.7.0-beta.3 release instead of the v0.6.0 which is a few years old now.
jonobr1
on 8 Aug 2019
👍2
Was this page helpful?
0 / 5 - 0 ratings
Related issues
Sudhanshu4122
·
6Comments
dev0nian
·
7Comments
davidwebca
·
6Comments
webenters
·
6Comments
sami8github
·
3Comments
Most helpful comment
Thanks for posting @eulertour, unfortunately Two.js doesn't import
<use />or<defs />tags... But, there's no reason that it shouldn't be able to. I can roadmap this feature. In the meantime I recommend using the v0.7.0-beta.3 release instead of the v0.6.0 which is a few years old now.