title: How to rotate SVG path without clipping and without increasing container <svg> height/width?
body: <p>Is it possible to rotate an svg path without clipping it? I'm aware that I can increase the size of the  container, but I don't want to do this. I tried to rotate the svg container at the same angle as the path, but it doesn't work.</p>
  <p>This is my basic svg setup:</p>
  <pre><code>&lt;svg width = {600} height = {600} viewBox = &quot;0 0 600 600&quot;&gt;
  &lt;svg x = {10} y = {10} height = {40} width = {100} viewBox = &quot;0 0 100 40&quot;&gt;
  &lt;path d= {&quot;M0 0 L100 40 M0 40 L100 0&quot;} /&gt;
  &lt;/svg&gt;
  &lt;svg&gt;
  </code></pre>
  <p>If I add <code>transform={rotate(90)} transform-origin=&quot;50% 50%&quot;</code> to the path element, then the element rotates, but gets cutoff by the svg.</p>
  <p>If I instead add that same code to the parent svg (the 100 width one), then absolutely nothing happens.</p>