title: SVG viewbox overflow: hidden / crop
body: <p>Is there a way to make anything outside the <code>viewBox</code> invisible? As if the <code>viewBox</code> itself were an element with <code>overflow: hidden</code></p>
  
  <p>In the <a href="http://jsfiddle.net/36LRK/" rel="noreferrer">jsFiddle</a>, you can see the <code>viewBox</code> highlighted in blue.</p>
  
  <pre><code>&lt;svg width="100%" height="100%" viewBox="0 0 800 100"&gt;
      &lt;rect width="100%" height="100%" fill="none" stroke="blue" /&gt;
      &lt;text y="10" x="10%" width="10%" height="200%" fill="#000" font-size="30" &gt;
          Only the part inside the viewBox should be visible
      &lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/OwoP1.png" alt="Only the part inside the viewBox should be visible"></p>