[Bug] the tooltip of generated svg using renderToSVGString is not working.

[liudonghua123]

Version

5.2.2

Link to Minimal Reproduction

n.a.

Steps to Reproduce

use the same option (configure render to svg) in playground and renderToSVGString.

option = {
  tooltip: { trigger: 'item' },
  xAxis: {
    type: 'category',
    data: ['Apple', 'Banana', 'Orange', 'Melon', 'Grape']
  },
  yAxis: { type: 'value' },
  series: [
    {
      name: 'Sales',
      type: 'bar',
      data: [120, 200, 150, 80, 70],
      itemStyle: { color: '#5470c6' },
      emphasis: { itemStyle: { color: 'Orange' } },
      label: { show: true, position: 'top' }
    }
  ]
};

Current Behavior

the svg in playground is highlight and tooltip enabled. But open the generated svg in browser, only highlight, the tooltip is not working as expected.

I did some research, the highlight works because the gnerated svg of renderToSVGString contains some embeded css styles. And the tooltip maybe need some embeded js which is missing now.

Here is an example svg embeded some js for tooltip demo.

svg source:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200" width="400" height="200" style="background: #fafafa; border: 1px solid #ddd;">
  
  <style>
    .hover-target { cursor: help; fill-opacity: 0.8; }
    .hover-target:hover { fill-opacity: 1; }
    #tip-text { 
      font-family: sans-serif; 
      font-size: 14px; 
      fill: #333; 
      pointer-events: none; /* Prevents the tooltip from flickering when the mouse hits it */
      font-weight: bold;
    }
  </style>

  <circle class="hover-target" cx="80" cy="100" r="40" fill="#ff5722" data-tip="Orange Circle" />
  <rect class="hover-target" x="160" y="60" width="80" height="80" fill="#2196f3" data-tip="Blue Square" />
  <polygon class="hover-target" points="340,60 300,140 380,140" fill="#4caf50" data-tip="Green Triangle" />

  <text id="tip-text" x="0" y="0" visibility="hidden">Tip Content</text>

  <script type="text/javascript">
    <![CDATA[
      const svg = document.querySelector('svg');
      const tooltip = document.getElementById('tip-text');
      const targets = document.querySelectorAll('.hover-target');

      function showTip(e) {
        const msg = e.target.getAttribute('data-tip');
        tooltip.textContent = msg;
        tooltip.setAttribute('visibility', 'visible');
        moveTip(e);
      }

      function moveTip(e) {
        // Get mouse position relative to the SVG coordinate system
        let CTM = svg.getScreenCTM();
        let mouseX = (e.clientX - CTM.e) / CTM.a;
        let mouseY = (e.clientY - CTM.f) / CTM.d;

        // Position text 15px to the right and 5px above the cursor
        tooltip.setAttribute('x', mouseX + 15);
        tooltip.setAttribute('y', mouseY - 5);
      }

      function hideTip() {
        tooltip.setAttribute('visibility', 'hidden');
      }

      targets.forEach(el => {
        el.addEventListener('mouseover', showTip);
        el.addEventListener('mousemove', moveTip);
        el.addEventListener('mouseout', hideTip);
      });
    ]]>
  </script>
</svg>

Expected Behavior

the tooltip of generated svg using renderToSVGString is working like the normal usage. Maybe need to embed some js to svg.

Environment

- OS: windows
- Browser: edge, chrome
- Framework:

Any additional comments?

No response

[liudonghua123]

I found if the svg is served as url and use as src of image, the script embeded is not working. How about implement css static tooltip instead of script based dynamic tooltip in phrase 1, this maybe easier, then add script to overwrite the tooltip behavior if the script can be executed in phrase 2?