liudonghua123 opened a new issue, #21533: URL: https://github.com/apache/echarts/issues/21533
### Version 5.2.2 ### Link to Minimal Reproduction n.a. ### Steps to Reproduce use the same option (configure render to svg) in [playground](https://echarts.apache.org/examples/en/editor.html?c=area-pieces) and renderToSVGString. ```js 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: ```xml <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 ```markdown - OS: windows - Browser: edge, chrome - Framework: ``` ### Any additional comments? _No response_ -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
