two.js: Incorrect SVG loading/interpreting

I have the following two external SVG’s

Left arm left

Right arm right

However, after being loaded with two.load, this is the result

image

This is the result with only the two arms rendinger image

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)

Most upvoted comments

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.