title: How to label a svg polygon
body: <p>I have made svg polygons like this:</p>
  
  <pre><code>&lt;svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="180px" height="113px" viewBox="-9.25 6.98 209 196" enable-background="new -18.25 -18.75 200 180" xml:space="preserve"&gt;
        &lt;g&gt;
          {% for i in range (1,5) %}
          &lt;polygon class="sl" index="{{i}}"  fill="{{colors[i].fill}}" points="{{colors[i].points }}" x="0px" y="0px" msg="{{ understand.msg }}"/&gt;
          {% endfor %}
        &lt;/g&gt;
      &lt;/svg&gt; 
  </code></pre>
  
  <p>I want to show a value along with each Polygon. Till now I tried this:</p>
  
  <pre><code>&lt;svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="180px" height="113px" viewBox="-9.25 6.98 209 196" enable-background="new -18.25 -18.75 200 180" xml:space="preserve"&gt;
        &lt;g&gt;
          {% for i in range (1,5) %}
          &lt;polygon class="sl" index="{{i}}"  fill="{{colors[i].fill}}" points="{{colors[i].points }}" x="0px" y="0px" msg="{{ understand.msg }}"&gt;
            &lt;text&gt;{{value}}&lt;/text&gt;
            &lt;/polygon&gt;
          {% endfor %}
        &lt;/g&gt;
      &lt;/svg&gt; 
  </code></pre>
  
  <p>this didn't work. Is there any way i can label the polygons?</p>
  
  <pre><code>&lt;svg xml:space="preserve" enable-background="new -18.25 -18.75 200 180" viewBox="-9.25 6.98 209 196" height="113px" width="180px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
            &lt;g&gt;
                          &lt;polygon msg="" y="0px" x="0px" points="80.351,140.188 56.09,98.165 104.612,98.165" fill="#F9F8F9" index="1" class="sl"&gt;
                &lt;text fill="red" y="" x=""&gt;0&lt;/text&gt;
              &lt;/polygon&gt;
                          &lt;polygon msg="" y="0px" x="0px" points="108.143,92.084 83.882,50.061 132.405,50.061 " fill="#C0E7D2" index="2" class="sl"&gt;
                &lt;text fill="red" y="" x=""&gt;0&lt;/text&gt;
              &lt;/polygon&gt;
                          &lt;polygon msg="" y="0px" x="0px" points="52.752,92.084 28.491,50.061 77.014,50.061 " fill="#FCC3CD" index="4" class="sl"&gt;
                &lt;text fill="red" y="" x=""&gt;0&lt;/text&gt;
              &lt;/polygon&gt;
                          &lt;polygon msg="" y="0px" x="0px" points="104.65,94.235 56.128,94.235 80.39,52.212 " fill="#F0EDEE" index="3" class="sl"&gt;
                &lt;text fill="red" y="" x=""&gt;0&lt;/text&gt;
              &lt;/polygon&gt;
                          &lt;polygon msg="" y="0px" x="0px" points="136.041,44.023 111.78,2 160.303,2 " fill="#0E9935" index="5" class="sl"&gt;
                &lt;text fill="red" y="" x=""&gt;1&lt;/text&gt;
              &lt;/polygon&gt;
                          &lt;polygon msg="" y="0px" x="0px" points="80.651,44.023 56.39,2 104.914,2 " fill="#E2DEDE" index="7" class="sl"&gt;
                &lt;text fill="red" y="" x=""&gt;0&lt;/text&gt;
              &lt;/polygon&gt;
                          &lt;polygon msg="" y="0px" x="0px" points="132.549,46.177 84.028,46.177 108.289,4.155" fill="#A5DDBE" index="6" class="sl"&gt;
                &lt;text fill="red" y="" x=""&gt;0&lt;/text&gt;
              &lt;/polygon&gt;
                          &lt;polygon msg="" y="0px" x="0px" points="25.262,44.024 1,2.001 49.524,2.001 " fill="#FE364E" index="9" class="sl"&gt;
                &lt;text fill="red" y="" x=""&gt;0&lt;/text&gt;
              &lt;/polygon&gt;
                          &lt;polygon msg="" y="0px" x="0px" points="77.161,46.177 28.636,46.177 52.898,4.153 " fill="#F9A8B6" index="8" class="sl"&gt;
                &lt;text fill="red" y="" x=""&gt;0&lt;/text&gt;
              &lt;/polygon&gt;
                        &lt;/g&gt;
          &lt;/svg&gt;
  </code></pre>