title: How can I limit or clip text in SVG?
body: <p>I have done a table in SVG, and I want to fill it with data dynamically. That means that I don't know how much space the text takes, and I want to clip or hide the overlapping text. How can I do that in SVG?</p>
  
  <p>My HTML document with SVG looks like:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;svg&gt;
  &lt;text x="100" y="100"&gt;Orange&lt;/text&gt;     &lt;text x="160" y="100"&gt;12&lt;/text&gt;
  &lt;text x="100" y="115"&gt;Pear&lt;/text&gt;       &lt;text x="160" y="115"&gt;7&lt;/text&gt;
  &lt;text x="100" y="130"&gt;Banana&lt;/text&gt;     &lt;text x="160" y="130"&gt;9&lt;/text&gt;
  &lt;text x="100" y="145"&gt;Pomegranate&lt;/text&gt;&lt;text x="160" y="145"&gt;2&lt;/text&gt;
  
  &lt;line x1="157" y1="85" x2="157" y2="155" style="stroke:rgb(100,100,100)"/&gt;
  &lt;/svg&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And this will render to:</p>
  
  <p><img src="https://i.stack.imgur.com/Y4ZvM.png" alt="enter image description here"></p>
  
  <p>Is there any way I can clip the text i my SVG-"table"?</p>
  
  <hr>
  
  <p><em>Implemented solution</em> from Erik's answer:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;svg&gt;
      &lt;text x="10" y="20" clip-path="url(#clip1)"&gt;Orange&lt;/text&gt;       
      &lt;text x="10" y="35" clip-path="url(#clip1)"&gt;Pear&lt;/text&gt;     
      &lt;text x="10" y="50" clip-path="url(#clip1)"&gt;Banana&lt;/text&gt;       
      &lt;text x="10" y="65" clip-path="url(#clip1)"&gt;Pomegranate&lt;/text&gt;
  
      &lt;text x="70" y="20"&gt;12&lt;/text&gt;
      &lt;text x="70" y="35"&gt;7&lt;/text&gt;
      &lt;text x="70" y="50"&gt;9&lt;/text&gt;
      &lt;text x="70" y="65"&gt;2&lt;/text&gt;
  
      &lt;line x1="67" y1="5" x2="67" y2="75" style="stroke:rgb(100,100,100)"/&gt;
  
      &lt;clipPath id="clip1"&gt;
          &lt;rect x="5" y="5" width="57" height="90"/&gt;
      &lt;/clipPath&gt;
  &lt;/svg&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/ZK9hP.png" alt="enter image description here"></p>