title: How can I mask an SVG's background using polygons?
body: <p>I'm trying yo make an SVG with a gradient backgound color from red to yellow to green, inside the SVG I've got 2 polygons (for now because there'll be more) that I wish would mask the SVG's background. I tried the following code:</p>
  
  <pre><code>&lt;svg height="500" width="500"&gt;
      &lt;defs&gt;
      &lt;linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"&gt;
      &lt;stop offset="0%" style="stop-color:rgb(34,177,76);stop-opacity:1" /&gt;
      &lt;stop offset="50%" style="stop-color:rgb(255,242,0);stop-opacity:1" /&gt;
      &lt;stop offset="100%" style="stop-color:rgb(237,28,36);stop-opacity:1" /&gt;
      &lt;/linearGradient&gt;
      &lt;/defs&gt;
  
      &lt;polygon points="0, 0, 100, 0, 100, 100, 0, 100" fill="url(#grad1)"&gt;
      &lt;polygon points="100, 100, 150, 250, 300, 350, 150, 400, 100, 300" fill="url(#grad1)" &gt;
      &lt;/svg&gt;
  </code></pre>
  
  <p>How can I apply a background to the SVG and have the polygons show the part of the background based on their position?</p>
  
  <p><a href="https://i.stack.imgur.com/UHGiO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UHGiO.png" alt="enter image description here"></a></p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I updated my code (YES it needs some work) to achive a path with a unified background and also have transparent polygons in case you wish to add a onclick event.</p>
  
  <pre><code>&lt;?php
  //Array with the different sections and their coordinates
          $body['item1'] = array(array(0, 0), array(100, 0), array(100, 100), array(0, 100));
          $body['item2'] = array(array(100, 100), array(150, 250), array(300, 350), array(150, 300), array(100, 300));
          $body['item3'] = array(array(300, 50), array(300, 350), array(200, 350), array(200, 50));
          ?&gt;
          &lt;svg x="0px" y="0px" height="500px" width="500px"&gt;
          &lt;defs&gt;
          &lt;linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"&gt;
          &lt;stop offset="0" style="stop-color:rgb(34,177,76);" /&gt;
          &lt;stop offset="50%" style="stop-color:rgb(255,242,0);" /&gt;
          &lt;stop offset="100%" style="stop-color:rgb(237,28,36);" /&gt;
          &lt;/linearGradient&gt;
          &lt;/defs&gt;
  
          &lt;g id="singlePath_correctGradient" fill="url(#gradient)"&gt;
          &lt;?php
          $polygon = '';
          echo '&lt;path d="';
          foreach ($body as $key =&gt; $values) {
              $polygon .= '&lt;polygon points="';
              $a = 1;
  
              foreach ($values as $coord) {
                  echo $a == 1 ? ' M ' . $coord[0] . ', ' . $coord[1] : '';
                  echo $a == 2 ? ' L ' . $coord[0] . ', ' . $coord[1] : '';
                  echo $a &gt; 2 ? ', ' . $coord[0] . ', ' . $coord[1] : '';
  
                  $polygon .= ($a == 1 ? '' : ', ') . $coord[0] . ', ' . $coord[1];
                  $a++;
              }
              $polygon .= '" onclick="alert(\'' . $key . '\')" fill-opacity="0"/&gt;';
          }
          echo '"&gt;&lt;/path&gt;';
  
          echo $polygon;
          ?&gt;
          &lt;/g&gt;
          &lt;/svg&gt;
  </code></pre>