title: How to allow the path elements in an svg element to overflow the container
body: <p>I was writing an animation for my logo  (<a href="http://codepen.io/samirc/pen/yeRmMw?editors=1100" rel="nofollow">here</a> is the link to the codepen), you can see the code there as well, but I will post here as well.</p>
  
  <p>So I targeted every path element and changed it's properties and everything works fine, except for the fact that since I use the "transform" to move the elements because they leave the container and are hidden.</p>
  
  <p>This is the CSS for the SVG element</p>
  
  <pre><code>svg {
    width:400px;
    height:400px;
    margin-top:100px;
    margin-left:calc(50% - 200px);
    transform-style:preserve-3d;
    overflow:visible;
  }
  </code></pre>
  
  <p>I tried adding a <code>viewbox</code> inline property to the svg tag but that didn't work either, what can I do? I want every path to be visible no matter where it is, is this possible? </p>
  
  <p>Thank you in advance.</p>