two.js: Incorrect SVG loading/interpreting
I have the following two external SVG’s
Left arm
Right arm
However, after being loaded with two.load
, this is the result
This is the result with only the two arms rendinger
I have tried both two.load
and two.interpret
, and I’ve also tried Two.Types.canvas
and Two.Types.svg
(prefer canvas, but tried both for completeness).
This is the SVG content for leftarm
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 170.68"><title>leftarm</title><path d="M161.38,116h0v0a20.51,20.51,0,0,1-16.73,23.69L56.2,155a20.51,20.51,0,0,1-23.67-16.73l-2.95.51a10.28,10.28,0,0,1-11.85-8.37h0a10.28,10.28,0,0,1,8.36-11.84l13.14-2.22L39,115.09q-.09-.51-.12-1a10.27,10.27,0,0,1,9.5-11,10.47,10.47,0,0,1,10.88,8.8l.16.92L137.7,99.34A20.5,20.5,0,0,1,161.38,116Z" fill="#f8b195"/></svg>
When using Two.Types.svg
, we can expect the resulting SVG, which gives me this
<g id="two_200" transform="matrix(1 0 0 1 149 290)" opacity="1"><path transform="matrix(1 0 0 1 0 0)" d="M 71.755 -11.167 L 71.755 -11.167 L 71.755 -11.167 L 71.755 -11.167 L 72.022 -6.583 L 71.263 -2.054 L 69.515 2.193 L 66.866 5.943 L 63.448 9.011 L 59.434 11.242 L 55.025 12.523 L 55.025 12.523 L -33.425 27.833 L -33.425 27.833 L -38.006 28.096 L -42.531 27.334 L -46.774 25.585 L -50.521 22.936 L -53.586 19.521 L -55.814 15.509 L -57.095 11.103 L -57.095 11.103 L -60.045 11.103 L -60.045 11.103 L -62.337 11.233 L -64.601 10.85 L -66.724 9.975 L -68.599 8.65 L -70.134 6.943 L -71.251 4.937 L -71.895 2.733 L -71.895 2.733 L -71.895 2.733 L -71.895 2.733 L -72.023 0.444 L -71.64 -1.817 L -70.766 -3.937 L -69.443 -5.811 L -67.738 -7.344 L -65.736 -8.461 L -63.535 -9.107 L -63.535 -9.107 L -50.395 -11.327 L -50.625 -12.077 C -11.625 103.013 -50.715 -12.587 -50.745 -13.077 L -50.745 -13.077 L -50.656 -15.377 L -50.058 -17.6 L -48.979 -19.633 L -47.474 -21.375 L -45.62 -22.738 L -43.508 -23.654 L -41.245 -24.077 L -41.245 -24.077 L -41.085 -24.077 L 48.075 -27.827 L 48.075 -27.827 L 52.65 -28.097 L 57.17 -27.344 L 61.411 -25.606 L 65.159 -22.969 L 68.228 -19.565 L 70.464 -15.564 L 71.755 -11.167 L 71.755 -11.167 Z " fill="#f8b195" stroke="transparent" stroke-width="1" stroke-opacity="1" fill-opacity="1" class="" visibility="visible" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" id="two_201"></path></g>
Is this an error with the SVG file or is the path translation being funky?
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 19 (12 by maintainers)
Unfortunately, without any additional information or context ( like an example or SVG file to reference ) there’s not much I can do to help you, @mamhaidly. If you could, please share some of these assets and I’d be happy to try to get to the bottom of your issue.