How add text in the hover effect of this triangle in svg? : <p>I made a triangle with hover effect, but I can´t add text. How can I add text inside the hover effect of this polygon? </p>

<p>html :</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg version="1.0" id="formas" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 792 612" enable-background="new 0 0 792 612" xml:space="preserve"&gt;
   &lt;linearGradient id="triangulo_apartado_1_1_" gradientUnits="userSpaceOnUse" x1="0" y1="252.5721" x2="117.5039" y2="252.5721"&gt;
      &lt;stop  offset="0" style="stop-color:#5D676A"/&gt;
      &lt;stop  offset="0.4845" style="stop-color:#808B91"/&gt;
      &lt;stop  offset="1" style="stop-color:#5D676A"/&gt;
   &lt;/linearGradient&gt;
   &lt;polygon class="triangle" id="triangulo_apartado_1"  fill="url(#triangulo_apartado_1_1_)"stroke="#FFFFFF" stroke-miterlimit="10" points="117.504,281.948 0,281.948 58.752,223.196"/&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>

<p>style in css:</p>

<pre><code>.triangle{} .triangle:hover{fill:#ffcd00;}
</code></pre>
