title: svg elements being clipped
body: <p><img src="https://i.stack.imgur.com/AtniX.png" alt="Snip 1"></p>
  
  <p><img src="https://i.stack.imgur.com/Hkeun.png" alt="Snip 2"></p>
  
  <p><img src="https://i.stack.imgur.com/xIZXL.png" alt="Snip 3"></p>
  
  <p>Does anyone know why the behavior displayed in the above images might be occurring? In the first image, the x and y coordinates of the svgArcs container are set to zero so the center is in the top left corner and only the bottom right corner is displayed, as expected. In the second image, I moved the container, but still only the bottom right corner is displayed. I posted the document structure so maybe you can take a look and tell me what's going on. </p>