google translate does not work on SVG tag

I'm using google translate on my site. but it does not working on SVG tag.

for example, a graph with legend:

<div>
this is working
</div>
<svg width="482" height="240" aria-label="ገበታ" style="overflow: hidden;">
    <defs id="_ABSTRACT_RENDERER_ID_0">
    </defs>
    <rect x="0" y="0" width="482" height="240" stroke="none" stroke-width="0" fill="#f5f5f5">
    </rect>
    <g>
        <rect x="339" y="60" width="143" height="129" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff">
        </rect>
      <g column-id="why does not translate?">
          <rect x="339" y="60" width="143" height="9" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff">
          </rect>
          <g>
              <text text-anchor="start" x="351" y="67.65" font-family="Arial" font-size="9" stroke="none" stroke-width="0" fill="#000000">why does not translate?</text>
          </g>
          <circle cx="343.5" cy="64.5" r="4.5" stroke="none" stroke-width="0" fill="#990099">ù
          </circle>
      </g>
      <g column-id="hello">
          <rect x="339" y="75" width="143" height="9" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff">
          </rect>
          <g>
              <text text-anchor="start" x="351" y="82.65" font-family="Arial" font-size="9" stroke="none" stroke-width="0" fill="#000000">hello
              </text>
          </g>
          <circle cx="343.5" cy="79.5" r="4.5" stroke="none" stroke-width="0" fill="#ffff00">
          </circle>
      </g>
    </g>
</svg>

is there a workaround about this problem?

Solution

here how i solved.

1 - i added a div in my page

<div id="legend" style="visibility:hidden"></div>

2 - after chart.draw, i write legend in this div

function TranslateGetLegenGraph()
{
    legend = parent.document.getElementById("legend")
    legend.innerHTML = "";

    g = this.document.getElementsByTagName("g");

    //first g tag is legend
    text = g[0].getElementsByTagName("text");

    for (ii = 0; ii < text.length; ii++)
    {
        legend.innerHTML += "<ttt>" + text[ii].textContent + "</ttt>";
    }
}

3 - then, i reload after 1 second my values wrote in div tag

    function TranslateGraph(delay)
    {
        setTimeout(function ()
        {
            legend = parent.document.getElementById("legend").getElementsByTagName("ttt");
    
            g = this.document.getElementsByTagName("g");
            text = g[0].getElementsByTagName("text");
            for (y = 0; y < legend.length; y++)
            {    

                //google add some "font" tag after translation
                text[y].textContent = (legend[y].getElementsByTagName("font").length == 0 ? legend[y].innerHTML : legend[y].getElementsByTagName("font")[0].getElementsByTagName("font")[0].innerHTML);
            }    
        }, delay);
    }